web-dev-qa-db-ja.com

dropzone.js-すべてのファイルがアップロードされた後に何かする方法

ドラッグアンドドロップファイルアップロードソリューションにdropzone.jsを使用しています。 allファイルがアップロードされた後に関数を呼び出す必要がある場所で立ち往生しています。この場合、

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

doSomething（）は、アップロードされた各ファイルに対して呼び出されます。すべてのファイルがアップロードされた後に関数を呼び出すにはどうすればよいですか？

javascriptjquerydropzone.js
48
Kemal Emin

EDIT：まさにその目的で使用できる queuecomplete イベントがあります。

前の答え：

Paul B.の答え は機能しますが、それを行うより簡単な方法は、キュー内にまだファイルがあるかどうかを確認するか、ファイルが完了するたびにアップロードすることです。この方法では、自分でファイルを追跡する必要はありません。

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

キューコンプリートを使用してください。ドキュメントを確認してください http://www.dropzonejs.com/

queuecomplete>キュー内のすべてのファイルのアップロードが完了すると呼び出されます。

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

おそらくこれを行う方法（または3つ）があります...しかし、私はあなたの目標に1つの問題があります：すべてのファイルがアップロードされたことをどのように知るのですか？もっと意味のある言い方をすると…「すべて」の意味をどうやって知るのですか？ドキュメンテーションによると、initはDropzone自体の初期化で呼び出され、completeイベントハンドラーを設定して、アップロードされた各ファイルが完了したときに何かを行うようにします。しかし、ユーザーがドロップする予定のすべてのファイルをいつドロップしたかをプログラムが知ることができるようにするために、ユーザーにどのようなメカニズムが与えられていますか？あなたが彼/彼女がバッチドロップを行うと仮定している場合（つまり、一度に1つのドロップアクションで、一度に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ライブラリを使用したことはありません。したがって、これは、必要なものを取得するために何ができるかを推測するのに最適です。）

11
Paul Bruno

「queuecomplete」イベントが追加されました。 Issue 317 を参照してください。

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


                    if(totalBytes == 100) {

                        //all done! call func here
                    }
                });
3
Ansell Cruz

あなたの方法は簡単なので、私はあなたに投票しました。送信するバイトがなくてもイベントが発生することがあるため、わずかな修正をわずかに行いました。ファイルの削除ボタンをクリックすると、マシン上で実行されました。

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

アップロード中またはキュー内にあるファイルをチェックする際の@enyoの回答に加えて、dropzone.jsに新しい関数を作成して、エラー状態のファイル（不良なファイルタイプ、サイズなど）をチェックしました。

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();
  }
1
Brett

私はそのソリューションを使用しようとしていましたが、機能しません。しかし、後で関数が宣言されていないことに気づいたので、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>
0
Marcexl

受け入れられた答えは必ずしも正しいとは限りません。 queuecompleteは、選択したファイルが最大ファイルサイズより大きい場合でも呼び出されます。

使用する適切なイベントは、successmultipleまたはcompletemultipleです。

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

0
Mohammed Noureldin