使用发送事件

发送带有编程创建悬浮窗额外的数据我有以下的（简化的例子）角指令，它创建了一个悬浮窗使用发送事件

directives.directive('dropzone', ['dropZoneFactory', function(dropZoneFactory){ 
    'use strict'; 
    return { 
     restrict: 'C', 
     link : function(scope, element, attrs){ 

      new Dropzone('#'+attrs.id, {url: attrs.url}); 

      var myDropZone = Dropzone.forElement('#'+attrs.id); 


      myDropZone.on('sending', function(file, xhr, formData){ 
       //this gets triggered 
       console.log('sending'); 
       formData.userName='bob'; 
      }); 
     } 
    } 
}]);

正如你所看到的sending事件处理程序，我想发送用户名（“bob”）以及上传的文件。但是，我似乎无法在我的路由中间件中找回它，因为req.params以空数组的形式返回（我也试过req.body）。

我的节点路径

{ 
    path: '/uploads', 
    httpMethod: 'POST', 
    middleware: [express.bodyParser({ keepExtensions: true, uploadDir: 'uploads'}),function(request,response){ 
     // comes back as [] 
     console.log(request.params); 

     //this sees the files fine 
     console.log(request.files); 

     response.end("upload complete"); 
    }] 
}

下面是该文档的sending事件

调用发送的每个文件之前说。获取xhr对象和formData对象作为第二个和第三个参数，因此您可以修改它们（例如添加CSRF标记）或添加其他数据。

编辑

我放弃了方案办法现在。我有两种表单提交给同一个端点，一个只有post和一个dropzone的端点。两者都有效，所以我认为这不是端点问题，而是我处理“发送”事件的问题。

//Receives the POST var just fine 
form(action="http://127.0.0.1:3000/uploads", method="post", id="mydz") 
    input(type="hidden", name="additionaldata", value="1") 
    input(type="submit") 

//With this one I can get the POST var 
form(action="http://127.0.0.1:3000/uploads", method="post", id="mydz2", class="dropzone") 
    input(type="hidden", name="additionaldata", value="1")

来源

2014-02-21 NicolasMoise

您好尼古拉斯。我怀疑它与您配置Express的方式有关。我从来没有见过这样的配置。你介意给出关于你如何创建和配置你的路线的更多细节？一般来说，我们配置路由[这种方式]（http://expressjs.com/api.html#app.VERB） – Feugy

我怀疑它。我已经发送了一个常规的html表单到同一个端点，并且一切都很顺利，所以我认为问题在于我如何通过Dropzone发送数据。你有发送数据的例子吗？我也尝试了他们在[常见问题]（https://github.com/enyo/dropzone/wiki/FAQ）中的方式（在html中使用dropzone来创建progamatically），但它也不起作用。 – NicolasMoise

你是如何在你的HTML表单中发送你的用户名的？作为查询或表单参数？ – Feugy

OK，其实我已经想通了，这要归功于Using Dropzone.js to upload after new user creation, send headers

的sending事件：

 myDropZone.on('sending', function(file, xhr, formData){ 
      formData.append('userName', 'bob'); 
     });

与之相对formData.userName = 'bob'不出于某种原因。

来源

2014-02-21 20:31:47 NicolasMoise

我想补充NicolasMoise的答案。作为webdev的初学者，我陷入了如何获取Dropzone的实例。我想要检索由自动发现功能生成的Dropzone实例。但事实证明，最简单的方法是在首先告知Dropzone 而不是自动发现后手动添加Dropzone实例。

<input id="pathInput"/> 
<div id="uploadForm" class="dropzone"/> 
<script> 
    $(document).ready(function(){ 
    Dropzone.autoDiscover = false; 
    var dZone = new Dropzone("div#uploadForm", {url: "/api/uploads"}); 
    dZone.on("sending", function(file, xhr, data){ 
     data.append("uploadFolder", $("#pathInput")[0].value); 
    }); 
    }); 
</script>

Serverside集团的数据将在request.body.uploadFolder

来源

2015-05-18 13:45:46 Azmo

萨科答案是一个可能的解决问题的方法。如果您需要在发送之前更改对象file，则此功能特别有用。

一种替代方法是使用params选项：

var myDropzone = new Dropzone("div#myId", 
           { url: "/file/post", params: { 'param_1': 1 }});

比照the documention

来源

2016-03-11 21:05:39

对于那些使用thatisuday/ng-dropzone回调方法完成这样：

<ng-dropzone class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods"></ng-dropzone>

在控制器：

$scope.dzCallbacks = { 
     sending: function(file, xhr, form) { 
      console.log('custom sending', arguments); 
      form.append('a', 'b'); 
     } 
    };

来源

2017-03-01 06:08:54 tsuz

使用发送事件

回答

相关问题