我正在使用 dropzone.js 作为我的拖放文件上传解决方案。在上传所有文件后，我被困在需要调用函数的地方。在这种情况下，
Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
});
}
};
将为每个已上传的文件调用 doSomething()。上传完所有文件后如何调用函数？
编辑：现在有一个queuecomplete事件可以用于该目的。
上一个答案：
Paul B. 的答案有效，但更简单的方法是检查队列中是否仍有文件或在文件完成时上传。这样您就不必自己跟踪文件：
Dropzone.options.filedrop = {
init: function () {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
doSomething();
}
});
}
};
只需使用 queuecomplete 这就是它的用途，而且非常简单。检查文档http://www.dropzonejs.com/
queuecomplete > 当队列中的所有文件完成上传时调用。
this.on("queuecomplete", function (file) {
alert("All files have uploaded ");
});
可能有一种（或三种）方法可以做到这一点......但是，我发现您的目标存在一个问题：您如何知道所有文件何时已上传？以更有意义的方式重新表述......你怎么知道“全部”是什么意思？根据文档，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();
}
});
}
};
基本上，您随时查看有人从 Dropzone 添加/删除文件，并记录闭包变量。然后，当每个文件下载完成时，您增加completeFiles进度计数器 var，并查看它现在是否等于您在用户将东西放入 Dropzone 时一直在观察和更新的 totalCount。（注意：从未使用过插件/JS 库，所以这是最好的猜测，你可以做些什么来得到你想要的。）
添加了“队列完成”事件。见问题 317。
我赞成你，因为你的方法很简单。我确实只做了一些轻微的修改，因为有时即使没有要发送的字节也会触发事件 - 在我的机器上，当我单击文件上的删除按钮时它会这样做。
myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent ){
if(totalPercentage >= 100 && totalBytesSent) {
// All done! Call func here
}
});
this.on("totaluploadprogress", function(totalBytes, totalBytesSent){
if(totalBytes == 100) {
//all done! call func here
}
});
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).
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();
}
我试图使用该解决方案，但它不起作用。但后来我意识到它没有声明的函数，所以我查看了 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>
接受的答案不一定正确。queuecomplete即使所选文件大于最大文件大小，也会调用。
要使用的正确事件是successmultiple或completemultiple。