jQuery 当 autoProcessQueue 设置为 false 时，Dropzone.js 仅上传两个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18059128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropzone.js uploads only two files when autoProcessQueue set to false
提问by Juuro
I use Dropzone.jsand I want it to upload the dropped not automatically but when the user clicks a button. So I set the autoProcessQueueoption to false. When the button is clicked the processQueue()method is called. I would suppose that now the full queue is processed. But thats not the case. Only the number of files which is specified in the parallelUploadsoption will be uploaded. The standard value of parallelUploadsseems to be 2. Which every click 2 files are processed and uploaded.
我使用Dropzone.js并且我希望它不会自动上传已删除的内容，而是在用户单击按钮时上传。所以我将autoProcessQueue选项设置为false. 单击按钮时，将processQueue()调用该方法。我想现在整个队列都被处理了。但事实并非如此。只会parallelUploads上传选项中指定的文件数量。的标准值parallelUploads好像是2。每点击2个文件被处理上传。
Do I have to set parallelUploadsto an very high number, for now to solve this?
我现在必须设置parallelUploads一个非常高的数字来解决这个问题吗？
Here's my full JS code:
这是我的完整 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();
});
回答by Venom
Add parallelUploads: 10(This is your max no)
添加parallelUploads：10（这是您的最大数量）
回答by Bianka M.
There's a simple way to solve this which can be found here:
有一个简单的方法可以解决这个问题，可以在这里找到：
https://github.com/enyo/dropzone/issues/253#issuecomment-22184190
https://github.com/enyo/dropzone/issues/253#issuecomment-22184190
"If you want autoProcessQueue to be true after the first upload, then just listen to the processing event, and set this.options.autoProcessQueue = true; inside."
“如果你想让 autoProcessQueue 在第一次上传后为 true，那么只需监听处理事件，并在里面设置 this.options.autoProcessQueue = true;。”
So just add
所以只需添加
this.on("processing", function() {
this.options.autoProcessQueue = true;
});
回答by Viktor Sanzharevskyy
My solution is:
我的解决办法是：
// 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;
});
回答by m.qayyum
Very late but maybe it will help someone.
很晚了，但也许它会帮助某人。
I noticed when I placed maxFilesSize above parallerUploads it didn't worked.
我注意到当我将 maxFilesSize 放在 parallerUploads 上方时它不起作用。
So sequence for options should be .
所以选项的顺序应该是 .
.
.
parallelUploads: 20,
maxFilesize: 2,
maxFiles: 20,
.
.
回答by Ahmad Aghazadeh
Add overdrive two event like
添加过载两个事件，如
processing -> Allow upload all file
处理 -> 允许上传所有文件
queuecomplete -> Return to normal
queuecomplete -> 恢复正常
init: function () {
this.on("queuecomplete", function () {
this.options.autoProcessQueue = false;
});
this.on("processing", function () {
this.options.autoProcessQueue = true;
});
};
回答by Akbar Noto
i used this dropzone with option (autoProcessQueue:false) and it does only upload 2 files instead of my whole files. And i found this workaround in the oligoil's answer at the git's issue
我将这个 dropzone 与选项 (autoProcessQueue:false) 一起使用，它只上传 2 个文件而不是我的整个文件。我在 git's issue 的 oligoil 的回答中找到了这个解决方法
The Idea is very simple (bcs we want to upload the files one by one, remember the option! :D ).
这个想法很简单（因为我们要一个一个上传文件，记住这个选项！:D）。
It upload multiple but limited to 1, after one file is uploaded it trigger the next Queue!
它上传多个但限制为1个，上传一个文件后触发下一个队列！
Hope it help someone!
希望它可以帮助某人！
here's my code using that idea ( since i have 2 forms to upload, after all the images is uploaded it will submitting the other forms )
这是我使用该想法的代码（因为我有 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();
}
});
}
};
回答by gmazoni
If you dont want to set maxFiles (default no limit) and use parallelUploads with the value you want. Read this!
如果您不想设置 maxFiles（默认无限制）并使用具有所需值的 parallelUploads。读这个！
I have solved the problem behaviour by setting
我已经通过设置解决了问题行为
autoQueue: false,
autoProcessQueue: true,
Then when I want to upload the files I just add them to the queue with:
然后当我想上传文件时，我只需将它们添加到队列中：
myDrop.enqueueFile(file)
But, this method just accept one file, for multiple files I'am using:
但是，这种方法只接受一个文件，对于我正在使用的多个文件：
myDrop.on("addedfiles", function(files){
//wait confirmation, or do some processing with the files, then:
files.forEach(function(file){
myDrop.enqueueFile(file)
})
}
Note that "addedfiles" event it's not in the documentation yet. I captures all files dragged into the dropzone or added by the click event.
请注意，“已添加文件”事件尚未出现在文档中。我捕获拖入拖放区或由单击事件添加的所有文件。
This is good because if you are using "sending" event to add POST data, or "parallelUploads" the sample code works fine and don't mess with the next files. I am using Sweet Alert 2 to ask for some tags before uploading the images.
这很好，因为如果您使用“发送”事件来添加 POST 数据或“parallelUploads”，示例代码可以正常工作并且不会干扰下一个文件。我正在使用 Sweet Alert 2 在上传图像之前询问一些标签。
回答by Dino
A bit late, but I wasn't happy with the other answers, so here's mine.
有点晚了，但我对其他答案不满意，所以这是我的。
Changing autoProcessingQueue (even temporarily) after clicking send mean that if you add another file to the dropzone while other are still queued, it will get uploaded without you having to press send again, which I didn't want. And I didn't want to use a setTimeout or a busyloop either. So here's how to do it without either :
单击发送后更改 autoProcessingQueue（即使是暂时的）意味着如果您将另一个文件添加到放置区而其他文件仍在排队，则无需再次按发送即可上传，这是我不想要的。而且我也不想使用 setTimeout 或 busyloop。所以这里是如何做到这一点：
Modify the dropzone.js file. First, in the Dropzone function, you need to add a second file array to store the queue when send is pressed :
修改 dropzone.js 文件。首先，在 Dropzone 函数中，您需要添加第二个文件数组来存储按下发送时的队列：
function Dropzone(element, options) {
...
this.files = [];
this.files2 = [];
Then, save the files to it when send is clicked by modifying processQueue
然后，通过修改 processQueue 在单击发送时将文件保存到其中
Dropzone.prototype.processQueue = function() {
this.files2 = this.getQueuedFiles();
...
Finally, edit the _finished function so that when a file is done uploading, another file get sent if there was still remaining ones in the queue when send was pressed:
最后，编辑 _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
}
}
};
回答by user2938512
I think that you can allow uploadMultiple and change dropzone.js file.
我认为您可以允许 uploadMultiple 并更改 dropzone.js 文件。
First, allow uploadMultiple Next, change this line code into dropzone.js:
首先，允许uploadMultiple 接下来，把这行代码改成dropzone.js：
return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
返回 this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
for
为了
return this.processFiles(queuedFiles.slice(0, queuedFiles.length));
返回 this.processFiles(queuedFiles.slice(0, queuedFiles.length));
回答by Alex
This solved it for me, without changing any dropzone.js code or voiding the parallelUploads setting.
这为我解决了这个问题，无需更改任何 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();
});
This assumes that dz is the dropzone instance. It works by invoking processQueue until all have been uploaded. The logic in processQueue takes care of returning if nothing needs to be done so no harm in the polling.
这假设 dz 是 dropzone 实例。它通过调用 processQueue 来工作，直到所有内容都已上传。processQueue 中的逻辑负责在不需要执行任何操作时返回，因此不会对轮询造成损害。
