[英]Upload multiple files one by one using DropZone.js
是否有可能使用dropzone.js逐个上传多个文件。 以下是自定义的dropzone配置脚本。
Dropzone.options.myDropzone = {
autoProcessQueue: false,
parallelUploads: 10,
addRemoveLinks:true,
init: function () {
var submitButton = document.querySelector("#submit-all");
myDropzone = this; // closure
submitButton.addEventListener("click", function () {
if(myDropzone.getQueuedFiles().length === 0)
{
alert("Please drop or select file to upload !!!");
}
else{
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
}
});
},
url: "upload.php"
};
现在,它一次上传所有在进程队列中的所有文件。 由于上传文件的大小会更大,因此所有文件都必须一个一个地上传。 请帮助短路。
我用它来一张一张地上传文件。 希望这可以帮助。 如果您想根据自己的功能编写完整的代码,请告诉我。
当客户确认文件上传时,将调用startUpload()。
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#uploadModal", {
url: "upload.php",
paramName: "file_upload",
maxFilesize: 1024,
maxFiles: 200,
autoProcessQueue: false
});
function startUpload(){
for (var i = 0; i < myDropzone.getAcceptedFiles().length; i++) {
myDropzone.processFile(myDropzone.getAcceptedFiles()[i]);
}
}
myDropzone.on('success', function(file, result) {
try {
result = JSON.parse(result)
if (!result.error) {
if(myDropzone.getQueuedFiles().length === 0 && myDropzone.getUploadingFiles().length === 0){
$("#uploadModal"). modal('hide');
myDropzone.removeAllFiles(true) ;
}
}
//TODO -
} catch (e) {
//TODO -
}
});
您需要将autoProcessQueue设置为true,而parallelUploads设置为1 。
将autoProcessQueue设置为true会告诉dropzone自动处理队列。 将parallelUploads设置为1可以指示dropzone一次仅从队列上传一个文件。
Dropzone.options.myDropzone = {
autoProcessQueue: true,
parallelUploads: 1,
addRemoveLinks:true,
init: function () {
var submitButton = document.querySelector("#submit-all");
myDropzone = this; // closure
submitButton.addEventListener("click", function () {
if(myDropzone.getQueuedFiles().length === 0)
{
alert("Please drop or select file to upload !!!");
}
else{
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
}
});
},
url: "upload.php"
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.