如何在Dropzone.js失敗后重新提交文件上傳？

Question

我有一個文件上傳表單，使用Dropzone.js將文件上傳到我的服務器。 用戶一次最多可以上傳5個，但我有一個獨特的條件我正在處理：如果服務器端出現任何單個文件錯誤（超過最大大小，錯誤的mime類型，錯誤的文件類型等） ，我不需要將任何文件添加到我的數據庫中。 這不是問題。

我遇到的問題是客戶端處理它。 為什么當我從服務器得到響應時，我再也無法通過單擊“提交”（其元素綁定到事件處理程序，如下所示）再次上載文件？

        Dropzone.options.uploadedFilesDropzone = {
              autoProcessQueue: false,
              maxFilesize: 1024, //MB
              addRemoveLinks: true,
              uploadMultiple: true,
              parallelUploads: 5,
              maxFiles: 5,
              init: function() {

                var uploadedFilesDropzone = this;

                $('#submit').on('click', function() {
                    uploadedFilesDropzone.processQueue();

                    uploadedFilesDropzone.on("successmultiple", function(files, response) {
                        // Handle the responseText here. For example, add the text to the preview element:
                        console.log(files);
                        console.log(response.errors[0]);
                        $.each(files, function(index, file) {
                            // no errors
                            if (response.errors[index].length == 0) {

                            } else {
                                file.previewElement.classList.add('dz-error');
                            }
                        })
                     });
                });
              }
        }

Answer 1

調用processQueue()后，將從Dropzone隊列中刪除文件。 由於隊列中沒有文件，因此您無法再單擊“提交”來上載文件。

您需要在收到響應后將每個文件添加回隊列。

如果文件服務器端出錯，最好將響應的狀態代碼設置為200以外的其他值，以便您可以覆蓋Dropzone錯誤監聽器。

    this.on("error", function(file, errorMessage) {
        $.each(dropZone.files, function(i, file) {
            file.status = Dropzone.QUEUED
        });

        $.each(message, function(i, item) {
            $("#dropzoneErrors .errors ul").append("<li>" + message[i] + "</li>")
        });
    });