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

How to allow resubmission of file uploads after failure with Dropzone.js?

本文关键字：提交 文件 新提交 Dropzone 何允许 js 失败      更新时间：2023-09-26

我有一个文件上传表单，它使用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');
                            }
                        })
                     });
                });
              }
        }
调用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>")
        });
    });
相关文章：