Question

我使用dropzone.js作为拖放文件上传解决方案。在所有上传文件后，我遇到了需要调用函数的问题。在这种情况下，

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

将为每个已上传的文件调用doSomething（）。如何在上传所有文件后调用函数？

Answer 1

编辑：现在有一个queuecomplete事件，您可以将其用于此目的。

上一个回答：

Paul B.'s answer有效，但更简单的方法是检查队列中是否还有文件，还是在文件完成时上传。这样您就不必自己跟踪文件：

Dropzone.options.filedrop = {
  init: function () {
    this.on("complete", function (file) {
      if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
        doSomething();
      }
    });
  }
};

Answer 2

只需使用queuecomplete就可以了，它就是如此简单。查看文档http://www.dropzonejs.com/

queuecomplete ＆gt;当队列中的所有文件都完成上传时调用。

      this.on("queuecomplete", function (file) {
          alert("All files have uploaded ");
      });

Answer 3

可能有一种方法（或三种方法）可以做到这一点......但是，我发现你的目标存在一个问题：你怎么知道所有文件的上传时间？以更有意义的方式改写......你怎么知道“所有”意味着什么？根据文档，在Dropzone本身的初始化时调用init，然后设置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，并查看它是否等于您一直在观看和更新的totalCount，因为用户在Dropzone中放置了内容。（注意：从未使用插件/ JS库。所以这是最好的猜测，你可以做什么来得到你想要的。）

Answer 4

添加了'queuecomplete'事件。请参阅Issue 317。

Answer 5

this.on("totaluploadprogress", function(totalBytes, totalBytesSent){


                    if(totalBytes == 100) {

                        //all done! call func here
                    }
                });

Answer 6

我向你投票，因为你的方法很简单。我确实做了一些轻微的修正，因为即使没有要发送的字节，有时事件也会触发 - 在我的机器上，当我点击文件上的删除按钮时它就完成了。

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

Answer 7

除了@ 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;
};

因此，支票将成为：

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

Answer 8

我试图使用该解决方案，但它不起作用。但后来我意识到它没有声明它的功能所以我在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>

Answer 9

接受的答案不一定正确。即使所选文件大于最大文件大小，也会调用queuecomplete。

使用的正确事件是successmultiple或completemultiple。

参考： Bing Isochrone API

dropzone.js - 上传所有文件后如何做某事

9 个答案: