如何在页面上的某个按钮上使用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
            });
        }
    });
});

还有其他选项，您可以将其限制为仅接受某些文件类型或多个文件等。有关详细信息，请参阅上面的链接。