调用
我有一个文件上传表单,它使用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>")
});
});