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