在一个按钮中触发多个 Dropzone 上传

Question

我有一个简单的功能，用户可以提交 his/her 过去和当前项目的详细信息，我正在使用 dropzone 以便用户可以将相关文档上传到他们的项目。所以基本上，他们可以随心所欲地添加许多项目

目前，我设置为autoProcessQueue: true,拖放区，这样当用户拖放文件时，它会自动上传。

var dynamicDropzone = new Dropzone(element, {
        autoProcessQueue: true,
        addRemoveLinks: true,
        parallelUploads: 1,
        maxFilesize: 5,
        acceptedFiles: 'image/*,application/pdf',
        dictDefaultMessage: '<div class="dz-default dz-message"></div>',
        url: tempURL + 'upload.php',
        params: {
            'userID': current_user_id,
        },

我想要的是所有 dropzone 实例将开始在 1 个单按钮触发器中上传所有文件。

我的问题是因为用户可以动态添加项目，点击按钮时拖放区不会触发上传

$("#button").click(function (e) {
    e.preventDefault();
    dynamicDropzone.processQueue();
});

button type="submit" id="button" class="btn btn-primary">Submit</button>

Answer 1

您需要保留autoProcessQueue: false以便Dropzone不会在您删除文件时自动上传文件。

然后在单击按钮时，您需要告诉 Dropzone 实例像这样处理队列：

$("#button").click(function (e) {
    e.preventDefault();
    dynamicDropzone1.processQueue(); // process dropzone instance 1
    dynamicDropzone2.processQueue(); // process dropzone instance 2
});

此处已有更详细的答案：

在一个按钮中触发多个 Dropzone 上传

Trigger Multiple Dropzone Upload in a single button

javascript

dropzone.js