如何使用Dropzone JS在頁面上的某個按鈕？

Question

我在頁面上有幾個按鈕。當我點擊每個按鈕時，我需要加載文件。

每個按鈕都有獨特的data-id屬性，我點擊它時必須通過請求AJAX傳遞。

如何使用Dropzone插件來做到這一點？

Answer 1

按照要求，這裏是一個如何創建一個按鈕的示例，該按鈕將使用Bootstrap上傳文件和數據屬性。

<button class='btn btn-default chooser' data-id='hello'>Choose a file</button> 

的JS需要這個輔助庫我寫了這個確切的目的：fileUpload.js

$(".chooser").each(function() { 
    var ele = this; 
    $(ele).fileUpload({ 
     change: function() { 
      // Get the files from the input 
      var files = $(ele).fileUpload("getFiles"); 
      var formData = new FormData(); 
      for (var i = files.length; i--;) 
       formData.append('myFiles[]', self.files[i], self.files[i].name); 
      // Get the data attribute from the button 
      formData.append('data-id', $(ele).data('id')); 
      $.ajax({ 
       url: "http://mywebsite.com/uploads", 
       type: 'POST', 
       data: formData, 
       processData: false, 
       contentType: false, 
      }).always(function(xhr) { 
       // all done. do something with the response here 
      }); 
     } 
    }); 
}); 

還有其他的選擇，你可以限制其只接受特定類型的文件或多個文件等見上面的鏈接瞭解更多信息。