web-dev-qa-db-ja.com

dropzone、jsのアップロード後にページを更新するにはどうすればよいですか？

Dropzone.jsを使用して、ファイルアップロードへのドラッグアンドドロップを有効にしています。

AutoProcessQueuesをfalseに設定し、アップロードコンテナに追加されたすべてのファイルに対してprocessQueueコマンドを実行しています。

すべてのファイルが処理された後にページを更新する方法はありますか？ processQueue関数にコールバック関数を設定できません。

javascriptjquerydropzone.js
7
user1828871

これは、他のコントリビューターソリューションを組み合わせた完全なソリューションです。ここで、dropzoneJsFormはドロップゾーンフォームのidです。このスクリプトはページの読み込み時に実行され、これらのオプションを使用してドロップゾーンを初期化します。 （自動検出を無効にしませんでした）。

// Initialise DropZone form control
// dropzoneJsForm = the id of your dropzone form
Dropzone.options.dropzoneJsForm = {
    maxFilesize: 10, // Mb
    init: function () {
        // Set up any event handlers
        this.on('completemultiple', function () {
            location.reload();
        });
    }
};

編集：completemultipleイベントが発生したため、キューの長さを確認する必要はありません。

17
Josh

これがあなたが正確に行う必要があることです。

プラグインを初期化します。

Dropzone.autoDiscover = false;

この行は、ドロップゾーンの自動検出をオフにするために使用されます。

    var md = new Dropzone(".mydropzone", {
        url: "/user/upload/", # your post url
        maxFilesize: "5", #max file size for upload, 5MB
        addRemoveLinks: true # Add file remove button.
    });

バインド完了メソッド

    md.on("complete", function (file) {
        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
            alert('Your action, Refresh your page here. ');
        }

        md.removeFile(file); # remove file from the zone.
    });

これがお役に立てば幸いです。

6
A.J.

すべてのファイルがアップロードされているかどうかを手動で確認する必要はありません。 Dropzoneによって提供されるデフォルトの関数があり、すべてのファイルがキューで処理されると起動します。 queuecompleteを活用してください。

これを使って：

this.on("queuecomplete", function (file) {
      location.reload();
  });
5
Zafar

イベント「完了」を処理してみてください。

$dropzone.on('complete', function () {
    location.reload();
});

Dropzone.js Wiki

1
Gandarez

completeMultipleハンドラーを使用しますが、アップロードをfile[]またはfiles[]の配列として適切に処理する必要があります。本当に対処したくない場合は、maxFiles: 1を設定するか、キューをチェックして、他に何もアップロードされていないことを確認し、ページの更新によって保留中のものがキャンセルされるようにします。次を使用してキューを確認できます。

if (myDropzone.getQueuedFiles().length == 0 && myDropzone.getUploadingFiles().length == 0)
0
DanJGer