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

Question

我正在使用 dropzone.js 作为我的拖放文件上传解决方案。我被困在需要在所有文件上传后调用函数的地方。在这种情况下，

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

doSomething() 将为每个已上传的文件调用。上传完所有文件后如何调用函数？

Answer 1

可能有一种（或三种）方法可以做到这一点...但是，我发现您的目标存在一个问题：您如何知道所有文件何时已上传？以更有意义的方式重新表述......你怎么知道“全部”是什么意思？根据文档，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 进度计数器变量，看看它现在是否等于用户在 Dropzone 中放置东西时您一直在观察和更新的 totalCount。 （注意：从未使用过插件/JS 库，所以这是最好的猜测，你可以做些什么来得到你想要的。）

Answer 2

编辑：现在有一个 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 3

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


                    if(totalBytes == 100) {

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

Answer 4

已添加“队列完成”事件。见Issue 317。

Answer 5

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

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

Answer 6

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

只需使用 queuecomplete，这就是它的用途，而且非常简单。查看文档http://www.dropzonejs.com/

queuecomplete > 当队列中的所有文件完成上传时调用。

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

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。

参考： http://www.dropzonejs.com/#event-successmultiple