使用發送事件

發送帶有編程創建懸浮窗額外的數據我有以下的（簡化的例子）角指令，它創建了一個懸浮窗使用發送事件

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

使用發送事件

回答

相關問題