53

私はDropzone.jsを使用していますが、ドロップされたものを自動的にアップロードするのではなく、ユーザーがボタンをクリックしたときにアップロードしたいと考えています。そこで、autoProcessQueueオプションをに設定しましたfalse。ボタンをクリックすると、processQueue()メソッドが呼び出されます。完全なキューが処理されたと思います。しかし、そうではありません。オプションで指定された数のファイルのみparallelUploadsがアップロードされます。の標準値は 2 のparallelUploadsようです。クリックごとに 2 つのファイルが処理されてアップロードされます。

parallelUploadsこれを解決するには、今のところ非常に高い数値に設定する必要がありますか?

これが私の完全なJSコードです：

var myDropzone = new Dropzone("div#myId", {
  url: "http://www.torrentplease.com/dropzone.php",
  addRemoveLinks: true,
  thumbnailWidth: "80",
  thumbnailHeight: "80",
  dictCancelUpload: "Cancel",
  autoProcessQueue: false
});

myDropzone.on("drop", function(event) {
  $('.edit_tooltip .option_bar').animate({
    opacity: 1,
    top: "-5"
  });
});


$('.edit_tooltip .option_bar .button').click(function() {
  myDropzone.processQueue();
});
4

10 に答える 10

22

私の解決策は次のとおりです。

// init dropzone with auto process queue false
var adPhotosDropzone = new Dropzone("#dropzone", {
    autoProcessQueue: false,
    parallelUploads: 3
});

$(document).on('click', '#btnUpload', function () {
    // enable auto process queue after uploading started
    adPhotosDropzone.options.autoProcessQueue = true;
    // queue processing
    adPhotosDropzone.processQueue();
});

// disable queue auto processing on upload complete
adPhotosDropzone.on("queuecomplete", function() {
    adPhotosDropzone.options.autoProcessQueue = false;
});
于 2015-05-19T07:49:56.470 に答える
4

のようなオーバードライブ2イベントを追加

処理 -> すべてのファイルのアップロードを許可

queuecomplete -> 通常に戻る

    init: function () {

            this.on("queuecomplete", function () {
                this.options.autoProcessQueue = false;
            });

            this.on("processing", function () {
                this.options.autoProcessQueue = true;
            });

    };
于 2016-10-13T11:46:29.530 に答える
0

少し遅れましたが、他の回答に満足できなかったので、ここに私のものがあります。

送信をクリックした後にautoProcessingQueueを（一時的であっても）変更すると、他のファイルがまだキューに入っている間に別のファイルをドロップゾーンに追加すると、もう一度送信を押さなくてもアップロードされますが、これは望ましくありませんでした。また、setTimeout や busyloop も使いたくありませんでした。したがって、どちらも使用せずに行う方法は次のとおりです。

dropzone.js ファイルを変更します。まず、Dropzone 関数で、送信が押されたときにキューを格納するための 2 つ目のファイル配列を追加する必要があります。

function Dropzone(element, options) {
  ...
  this.files = [];
  this.files2 = [];

次に、processQueueを変更してsendをクリックすると、ファイルが保存されます

Dropzone.prototype.processQueue = function() {
  this.files2 = this.getQueuedFiles();
  ...

最後に、_finished 関数を編集して、ファイルのアップロードが完了したときに、送信が押されたときにまだキューにファイルが残っていた場合に別のファイルが送信されるようにします。

Dropzone.prototype._finished = function(files, responseText, e) {
  var file, _i, _len;
  for (_i = 0, _len = files.length; _i < _len; _i++) {
    file = files[_i];
    file.status = Dropzone.SUCCESS;
    this.emit("success", file, responseText, e);
    this.emit("complete", file);
    this.files2 = this.files2.filter(function(e) { return e.status == "queued" }); // Remove the files that are finished or already being uploaded
  }
  if (this.options.uploadMultiple) {
    this.emit("successmultiple", files, responseText, e);
    this.emit("completemultiple", files);
  }
  if (this.options.autoProcessQueue) {
    return this.processQueue();
  }
  else {
      if (typeof this.files2 != "undefined" && this.files2.length > 0) {
          this.processFiles(this.files2.slice(0,1)); // process the next file if there's one
      }
  }
};
于 2017-06-17T10:34:25.893 に答える
-1

dropzone.js コードを変更したり、parallelUploads 設定を無効にしたりすることなく、これで解決しました。

$('#submit').click(function(e){
  e.preventDefault();

  function tryQueue(){
    var numQueued=dz.getQueuedFiles().length;
    var numFiles=numQueued+dz.getUploadingFiles().length;
    if(numQueued>0){
      dz.processQueue();
    }
    if(numFiles>0){
      setTimeout(tryQueue,1000);
    }
    else window.location='/'; //redirect when finished
  }
  tryQueue();
});

これは、dz が dropzone インスタンスであると想定しています。すべてがアップロードされるまで processQueue を呼び出すことで機能します。processQueue のロジックは、何もする必要がない場合に返す処理を行うため、ポーリングに害はありません。

于 2014-01-17T10:41:09.213 に答える