jQuery dropzone.js - 上传所有文件后如何做某事
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16998420/
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 - how to do something after ALL files are uploaded
提问by Subliminal Hash
I am using dropzone.js for my drag-drop file upload solution. I am stuck at something where I need to call a function after allthe files are uploaded. In this case,
我将 dropzone.js 用于我的拖放文件上传解决方案。在上传所有文件后，我被困在需要调用函数的地方。在这种情况下，
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
});
}
};
doSomething() will be called for each file that has been uploaded. How can I call a function after all the files are uploaded?
doSomething() 将针对已上传的每个文件调用。上传所有文件后如何调用函数？
回答by enyo
EDIT:There is now a queuecompleteevent that you can use for exactly that purpose.
编辑：现在有一个queuecomplete事件，您可以完全用于该目的。
Previous answer:
上一个答案：
Paul B.'s answerworks, but an easier way to do so, is by checking if there are still files in the queue or uploading whenever a file completes. This way you don't have to keep track of the files yourself:
Paul B. 的答案有效，但更简单的方法是检查队列中是否仍有文件或在文件完成时上传。这样您就不必自己跟踪文件：
Dropzone.options.filedrop = {
init: function () {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
doSomething();
}
});
}
};
回答by Shawn Vader
Just use queuecomplete that's what its there for and its so so simple. Check the docs http://www.dropzonejs.com/
只需使用 queuecomplete，这就是它的用途，而且非常简单。检查文档http://www.dropzonejs.com/
queuecomplete> Called when all files in the queue finished uploading.
queuecomplete> 当队列中的所有文件完成上传时调用。
this.on("queuecomplete", function (file) {
alert("All files have uploaded ");
});
回答by Paul Bruno
There is probably a way (or three) to do this... however, I see one issue with your goal: how do you know when all the files have been uploaded? To rephrase in a way that makes more sense... how do you know what "all" means? According to the documentation, initgets called at the initialization of the Dropzone itself, and then you set up the completeevent handler to do something when each file that's uploaded is complete. But, what mechanism is the user given to allow the program to know when he's dropped all the files he's intended to drop? If you are assuming that he/she will do a batch drop (i.e., drop onto the Dropzone 2-whatever number of files, at once, in one drop action), then the following code could/possibly should work:
可能有一种（或三种）方法可以做到这一点……但是，我发现您的目标存在一个问题：您如何知道所有文件何时上传？以更有意义的方式重新表述……你怎么知道“全部”是什么意思？根据文档，init在 Dropzone 本身的初始化时被调用，然后您设置complete事件处理程序以在上传的每个文件完成时执行某些操作。但是，给用户什么机制来让程序知道他何时删除了他打算删除的所有文件？如果您假设他/她将执行批量删除（即，一次性放入 Dropzone 2 - 无论多少文件，在一个删除操作中），那么以下代码可以/可能应该工作：
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
var totalFiles = 0,
completeFiles = 0;
this.on("addedfile", function (file) {
totalFiles += 1;
});
this.on("removed file", function (file) {
totalFiles -= 1;
});
this.on("complete", function (file) {
completeFiles += 1;
if (completeFiles === totalFiles) {
doSomething();
}
});
}
};
Basically, you watch any time someone adds/removes files from the Dropzone, and keep a count in closure variables. Then, when each file download is complete, you increment the completeFilesprogress counter var, and see if it now equals the totalCount you'd been watching and updating as the user placed things in the Dropzone. (Note: never used the plug-in/JS lib., so this is best guess as to what you could do to get what you want.)
基本上，您随时可以看到有人从 Dropzone 添加/删除文件，并在闭包变量中进行计数。然后，当每个文件下载完成时，您增加completeFiles进度计数器 var，看看它现在是否等于您在用户将东西放入 Dropzone 时一直在观察和更新的 totalCount。（注意：从未使用过插件/JS 库，所以这是最好的猜测，你可以做什么来得到你想要的。）
回答by AnsellC
this.on("totaluploadprogress", function(totalBytes, totalBytesSent){
if(totalBytes == 100) {
//all done! call func here
}
});
回答by Kevin Krouse
回答by Martin Parry
I up-voted you as your method is simple. I did make only a couple of slight amends as sometimes the event fires even though there are no bytes to send - On my machine it did it when I clicked the remove button on a file.
我给你投了赞成票，因为你的方法很简单。我确实只做了一些轻微的修改，因为有时即使没有要发送的字节也会触发事件 - 在我的机器上，当我单击文件上的删除按钮时，它会这样做。
myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent ){
if(totalPercentage >= 100 && totalBytesSent) {
// All done! Call func here
}
});
回答by Brett
In addition to @enyo's answer in checking for files that are still uploading or in the queue, I also created a new function in dropzone.js to check for any files in an ERROR state (ie bad file type, size, etc).
除了@enyo 在检查仍在上传或在队列中的文件时的回答之外，我还在 dropzone.js 中创建了一个新函数来检查任何处于 ERROR 状态的文件（即错误的文件类型、大小等）。
Dropzone.prototype.getErroredFiles = function () {
var file, _i, _len, _ref, _results;
_ref = this.files;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
file = _ref[_i];
if (file.status === Dropzone.ERROR) {
_results.push(file);
}
}
return _results;
};
And thus, the check would become:
因此，支票将变成：
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getErroredFiles().length === 0) {
doSomething();
}
回答by Marcexl
I was trying to work with that solutions but it doesn't work. But later I was realize that the function it wasn't declared so I watch in to the dropzone.com page and take the example to call events. So finally work on my site. For those like me who don't understand JavaScript very well, I leave you the example.
我试图使用该解决方案，但它不起作用。但后来我意识到它没有声明函数，所以我查看了 dropzone.com 页面并以调用事件为例。所以最后在我的网站上工作。对于像我这样不太了解 JavaScript 的人，我将示例留给您。
<script type="text/javascript" src="/js/dropzone.js"></script>
<script type="text/javascript">
// This example uses jQuery so it creates the Dropzone, only when the DOM has
// loaded.
// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
// or disable for specific dropzone:
// Dropzone.options.myDropzone = false;
$(function() {
// Now that the DOM is fully loaded, create the dropzone, and setup the
// event listeners
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("queuecomplete", function(file, res) {
if (myDropzone.files[0].status != Dropzone.SUCCESS ) {
alert('yea baby');
} else {
alert('cry baby');
}
});
});
</script>
回答by Mohammed Noureldin
The accepted answer is not necessarily correct. queuecompletewill be called even when the selected file is larger than the max file size.
接受的答案不一定正确。queuecomplete即使所选文件大于最大文件大小，也会调用。
The proper event to use is successmultipleor completemultiple.
要使用的正确事件是successmultipleor completemultiple。
