Question

我有一个文件上传表单，它使用Dropzone.js将文件上传到我的服务器。用户一次最多可以上传5个，但我有一个独特的条件我处理：如果服务器端出现任何单个文件错误（超过最大大小，错误的mime类型，错误的文件类型，等），我不需要将任何文件添加到我的数据库中。这不是问题。

我遇到的问题是客户端处理它。为什么当我从服务器收到回复时，我再也无法通过点击＆＃34;提交＆＃34;再次上传文件。（其元素绑定到事件处理程序，如下所示）？

        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>")
        });
    });

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

1 个答案: