dropzone.js – 所有file upload后如何做

我使用dropzone.js作为我的拖放file upload解决scheme。 在所有file upload后,我都被困在某些需要调用函数的地方。 在这种情况下,

Dropzone.options.filedrop = { maxFilesize: 4096, init: function () { this.on("complete", function (file) { doSomething(); }); } }; 

每个上传的文件都会调用doSomething()。 所有file upload后如何调用函数?

编辑:现在有一个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的文件,并保持计数闭包variables。 然后,当每个文件下载完成后,您将递增completeFiles进度计数器var,并查看它现在是否等于您在Dropzone中放置东西时所观看和更新的totalCount。 (注:从来没有使用插件/ JS库,所以这是最好的猜测,你可以做什么来得到你想要的。)

已经添加了“queuecomplete”事件。 见问题317 。

 this.on("totaluploadprogress", function(totalBytes, totalBytesSent){ if(totalBytes == 100) { //all done! call func here } }); 

我推举你,因为你的方法很简单。 我只做了一些微小的修改,因为即使没有字节发送,事件也会被触发 – 在我的机器上,当我点击文件上的删除button时,它已经完成了。

 myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent ){ if(totalPercentage >= 100 && totalBytesSent) { // All done! Call func here } }); 

除了@ enyo的检查仍在上传的文件或队列中的答案外,我还在dropzone.js中创build了一个新函数来检查处于ERROR状态的任何文件(即文件types,大小等)。

 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; }; 

因此,支票将变成:

  if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getErroredFiles().length === 0) { doSomething(); } 

我正在尝试使用该解决scheme,但它不起作用。 但后来我意识到,它没有声明的function,所以我看着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>