web-dev-qa-db-ja.com

autozoneがfalseに設定されている場合、Dropzone.jsは2つのファイルのみをアップロードします

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

追加parallelUploads：1（これは最大値です）

44
Venom

これを解決する簡単な方法があります。こちらをご覧ください。

https://github.com/enyo/dropzone/issues/253#issuecomment-2218419

「最初のアップロード後にautoProcessQueueをtrueにしたい場合は、処理イベントをリッスンし、this.options.autoProcessQueue = true; insideに設定してください。」

追加するだけです

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

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

// 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;
});
14
Viktor Sanzharevskyy

非常に遅いが、多分それは誰かを助けるでしょう。

MaxFilesSizeをparallerUploadsの上に配置すると、機能しませんでした。

したがって、オプションのシーケンスはである必要があります。

.
.
parallelUploads: 20,    
maxFilesize: 2, 
maxFiles: 20,
.
.
5
m.qayyum

オーバードライブ2イベントを追加

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

queuecomplete->通常に戻る

    init: function () {

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

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

    };
4
Ahmad Aghazadeh

このドロップゾーンをオプション（autoProcessQueue：false）で使用しましたが、ファイル全体ではなく2つのファイルのみをアップロードします。そして、私はこの回避策を見つけました gitの問題でのオリゴイルの答え

アイデアは非常にシンプルです（bcsファイルを1つずつアップロードしたいので、オプションを忘れないでください！：D）。

複数のファイルをアップロードしますが、1つに制限されています。1つのファイルがアップロードされると、次のキューがトリガーされます。

それが誰かを助けることを願っています！

ここにそのアイデアを使用した私のコードがあります（アップロードするフォームが2つあるので、すべての画像がアップロードされた後、他のフォームを送信します）

Dropzone.options.dropzoneForm = {
        paramName: "file", // The name that will be used to transfer the file
        autoProcessQueue: false,
        addRemoveLinks:true,
        parallelUploads : 1,
        maxFiles : 50,
        autoProcessQueue : false,
        autoQueue : true,
        dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
        init: function () {
            ....

            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    console.log("END ", this.getQueuedFiles().length);
                }
                else {
                    Dropzone.forElement("#dropzoneForm").processQueue();
                }
            });
        }
    };
1
Akbar Noto

UploadMultipleを許可し、dropzone.jsファイルを変更できると思います。

まず、uploadMultipleを許可します。次に、この行コードをdropzone.jsに変更します。

return this.processFiles（queuedFiles.slice（0、parallelUploads-processingLength））;

for

return this.processFiles（queuedFiles.slice（0、queuedFiles.length））;

0
user2938512

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

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

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

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

次に、processQueueを変更して、送信をクリックしたときにファイルを保存します

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
      }
  }
};
0
Dino