我的目标是将一堆图片上传到服务器,然后在上传过程成功完成后清除表单。但是successmultiple
事件根本不会发生。
我尝试以三种不同的方式通过在代码中的不同位置调用removeAllFiles()
来实现这一点:init
的内部和外部以及作为单独的事件。
但没有成功。
完整代码段
<form ref='uploadForm'
id='uploadForm'
action='/file-upload'
method='post'
class="dropzone"
encType="multipart/form-data" name="sampleFile">
</form>
<script>
document.addEventListener("DOMContentLoaded", function () {
Dropzone.options.uploadForm = {
autoProcessQueue: false,
addRemoveLinks: true,
acceptedFiles: 'image/*',
resizeWidth: 800,
resizeMimeType: 'image/jpeg',
maxFiles: 3,
init: function () {
var submitButton = document.getElementById('addItem-btn')
myDropzone = this;
submitButton.addEventListener("click", function () {
var item_id = 'i_' + Math.random().toString(36).substr(2, 12);
getAdditionalItem(undefined, function (result) {
if (result === undefined) {
console.log("Callback failed...");
}
else {
addNewItem(result[0], result[1], item_id);
}
});
myDropzone.on('sending', function (file, xhr, uploadForm) {
uploadForm.append('user_id', localStorage.getItem("user_id")),
uploadForm.append('item_id', item_id)
});
myDropzone.processQueue();
myDropzone.on("successmultiple", function () {
alert("Attempt #1: All pics uploaded");
myDropzone.removeAllFiles();
});
});
myDropzone.on("successmultiple", function () {
alert("Attempt #2: All pics uploaded");
myDropzone.removeAllFiles();
});
},
successmultiple: function () {
alert("Attempt #3: All pics uploaded");
myDropzone.removeAllFiles();
}
}
});
</script>
当我执行此代码时,所有图片都会上传,但不会触发警报并且不会清除dropzone表单。
我还尝试将queuecomplete
事件与removeAllFiles()
一起使用,但也没有结果。