[英]Dropzone.js uploads only two files when autoProcessQueue set to false
我使用Dropzone.js并且我希望它不会自动上传已删除的内容,而是在用户单击按钮时上传。 所以我将autoProcessQueue
选项设置为false
。 单击按钮时,将processQueue()
方法。 我想现在整个队列都被处理了。 但事实并非如此。 只会上传在parallelUploads
选项中指定的文件数量。 parallelUploads
的标准值似乎是 2。每次点击 2 个文件都会被处理和上传。
我是否必须将parallelUploads
设置为一个非常高的数字,现在才能解决这个问题?
这是我的完整 JS 代码:
var myDropzone = new Dropzone("div#myId", {
url: "http://www.torrentplease.com/dropzone.php",
addRemoveLinks: true,
thumbnailWidth: "80",
thumbnailHeight: "80",
dictCancelUpload: "Cancel",
autoProcessQueue: false
});
myDropzone.on("drop", function(event) {
$('.edit_tooltip .option_bar').animate({
opacity: 1,
top: "-5"
});
});
$('.edit_tooltip .option_bar .button').click(function() {
myDropzone.processQueue();
});
添加parallelUploads:10 (这是您的最大数量)
有一个简单的方法可以解决这个问题,可以在这里找到:
https://github.com/enyo/dropzone/issues/253#issuecomment-22184190
“如果你想让 autoProcessQueue 在第一次上传后为 true,那么只需监听处理事件,并在里面设置 this.options.autoProcessQueue = true;。”
所以只需添加
this.on("processing", function() {
this.options.autoProcessQueue = true;
});
我的解决办法是:
// init dropzone with auto process queue false
var adPhotosDropzone = new Dropzone("#dropzone", {
autoProcessQueue: false,
parallelUploads: 3
});
$(document).on('click', '#btnUpload', function () {
// enable auto process queue after uploading started
adPhotosDropzone.options.autoProcessQueue = true;
// queue processing
adPhotosDropzone.processQueue();
});
// disable queue auto processing on upload complete
adPhotosDropzone.on("queuecomplete", function() {
adPhotosDropzone.options.autoProcessQueue = false;
});
很晚了,但也许它会帮助某人。
我注意到当我将 maxFilesSize 放在 parallerUploads 上方时它不起作用。
所以选项的顺序应该是 .
.
.
parallelUploads: 20,
maxFilesize: 2,
maxFiles: 20,
.
.
添加过载两个事件,如
处理 -> 允许上传所有文件
queuecomplete -> 恢复正常
init: function () {
this.on("queuecomplete", function () {
this.options.autoProcessQueue = false;
});
this.on("processing", function () {
this.options.autoProcessQueue = true;
});
};
我将这个 dropzone 与选项 (autoProcessQueue:false) 一起使用,它只上传 2 个文件而不是我的整个文件。 我在 git's issue 的 oligoil 的回答中找到了这个解决方法
这个想法很简单(因为我们要一个一个上传文件,记住这个选项!:D)。
它上传多个但限制为1个,上传一个文件后触发下一个队列!
希望它可以帮助某人!
这是我使用该想法的代码(因为我有 2 个表单要上传,上传所有图像后,它将提交其他表单)
Dropzone.options.dropzoneForm = {
paramName: "file", // The name that will be used to transfer the file
autoProcessQueue: false,
addRemoveLinks:true,
parallelUploads : 1,
maxFiles : 50,
autoProcessQueue : false,
autoQueue : true,
dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
init: function () {
....
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
console.log("END ", this.getQueuedFiles().length);
}
else {
Dropzone.forElement("#dropzoneForm").processQueue();
}
});
}
};
如果您不想设置 maxFiles(默认无限制)并使用具有所需值的 parallelUploads。 读这个!
我已经通过设置解决了问题行为
autoQueue: false,
autoProcessQueue: true,
然后当我想上传文件时,我只需将它们添加到队列中:
myDrop.enqueueFile(file)
但是,这种方法只接受一个文件,对于我正在使用的多个文件:
myDrop.on("addedfiles", function(files){
//wait confirmation, or do some processing with the files, then:
files.forEach(function(file){
myDrop.enqueueFile(file)
})
}
请注意,“已添加文件”事件尚未出现在文档中。 我捕获拖入拖放区或由单击事件添加的所有文件。
这很好,因为如果您使用“发送”事件来添加 POST 数据或“parallelUploads”,示例代码可以正常工作并且不会干扰下一个文件。 我正在使用 Sweet Alert 2 在上传图像之前询问一些标签。
我认为您可以允许 uploadMultiple 并更改 dropzone.js 文件。
首先,允许uploadMultiple 接下来,把这行代码改成dropzone.js:
返回 this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
为了
返回 this.processFiles(queuedFiles.slice(0, queuedFiles.length));
有点晚了,但我对其他答案不满意,所以这是我的。
单击发送后更改 autoProcessingQueue(即使是暂时的)意味着如果您将另一个文件添加到放置区而其他文件仍在排队,则无需再次按发送即可上传,这是我不想要的。 而且我也不想使用 setTimeout 或 busyloop。 所以这里是如何做到这一点:
修改 dropzone.js 文件。 首先,在 Dropzone 函数中,您需要添加第二个文件数组来存储按下发送时的队列:
function Dropzone(element, options) {
...
this.files = [];
this.files2 = [];
然后,通过修改 processQueue 在单击发送时将文件保存到其中
Dropzone.prototype.processQueue = function() {
this.files2 = this.getQueuedFiles();
...
最后,编辑 _finished 函数,以便在文件上传完成后,如果按下发送时队列中仍有剩余文件,则会发送另一个文件:
Dropzone.prototype._finished = function(files, responseText, e) {
var file, _i, _len;
for (_i = 0, _len = files.length; _i < _len; _i++) {
file = files[_i];
file.status = Dropzone.SUCCESS;
this.emit("success", file, responseText, e);
this.emit("complete", file);
this.files2 = this.files2.filter(function(e) { return e.status == "queued" }); // Remove the files that are finished or already being uploaded
}
if (this.options.uploadMultiple) {
this.emit("successmultiple", files, responseText, e);
this.emit("completemultiple", files);
}
if (this.options.autoProcessQueue) {
return this.processQueue();
}
else {
if (typeof this.files2 != "undefined" && this.files2.length > 0) {
this.processFiles(this.files2.slice(0,1)); // process the next file if there's one
}
}
};
这为我解决了这个问题,无需更改任何 dropzone.js 代码或取消 parallelUploads 设置。
$('#submit').click(function(e){
e.preventDefault();
function tryQueue(){
var numQueued=dz.getQueuedFiles().length;
var numFiles=numQueued+dz.getUploadingFiles().length;
if(numQueued>0){
dz.processQueue();
}
if(numFiles>0){
setTimeout(tryQueue,1000);
}
else window.location='/'; //redirect when finished
}
tryQueue();
});
这假设 dz 是 dropzone 实例。 它通过调用 processQueue 来工作,直到所有内容都已上传。 processQueue 中的逻辑负责在不需要执行任何操作时返回,因此不会对轮询造成损害。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.