如何使用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 
      }); 
     } 
    }); 
}); 

还有其他的选择，你可以限制其只接受特定类型的文件或多个文件等见上面的链接了解更多信息。