Javascript 当autoProcessQueue设置为false时，Dropzone.js仅上载两个文件

我使用，我希望它上传删除的不是自动，而是当用户点击一个按钮。因此，我将

autoProcessQueue

选项设置为

false

。单击按钮时，将调用

processQueue（）

方法。我想现在已经处理了整个队列。但事实并非如此。只有在

parallelUploads

选项中指定的文件数才会被上载。

parallelUploads

的标准值似乎是2。每点击一次，就会处理并上传2个文件

我是否必须将

并行上传

设置为一个非常高的数字才能解决这个问题

以下是我的完整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();
});

---

添加并行上传：10（这是您的最大数量）

我认为您可以允许多次上传并更改dropzone.js文件

首先，允许多次上传 接下来，将此行代码更改为dropzone.js：

返回这个.processFiles（queuedFiles.slice（0，parallelUploads-processingLength））

为了

返回此.processFiles（queuedFiles.slice（0，queuedFiles.length））

---

这为我解决了这个问题，没有更改任何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中的逻辑负责在不需要执行任何操作的情况下返回，这样就不会对轮询造成伤害。

有一种简单的方法可以解决这个问题，可以在这里找到：

如果希望首次上载后autoProcessQueue为true，则只需侦听处理事件，并将其设置为。options.autoProcessQueue=true；inside

所以只要加上

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

我的解决办法是：

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

---

添加overdrive两个事件，如

处理->允许上载所有文件

队列完成->恢复正常

    init: function () {

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

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

    };

---

很晚了，但也许会有帮助

我注意到，当我将MaxFileSize放在parallerUploads上方时，它不起作用

所以选项的顺序应该是

---

有点晚了，但我对其他答案不满意，所以这是我的

单击“发送”后更改autoProcessingQueue（即使是临时更改）意味着，如果在其他文件仍在排队的情况下向dropzone添加另一个文件，则该文件将被上载，而无需再次按“发送”，这是我不希望看到的。我也不想使用setTimeout或busyloop。因此，以下是如何做到这一点：

修改dropzone.js文件。首先，在Dropzone函数中，当按下send时，需要添加第二个文件数组来存储队列：

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

然后，通过修改processQueue在单击send时将文件保存到它

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

最后，编辑_finished函数，以便在完成文件上载后，如果按下send时队列中仍有剩余文件，则会发送另一个文件：

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

Dropzone.prototype.\u finished=函数（文件、响应文本、e）{
变量文件，_i，_len；
对于（_i=0，_len=files.length；_i<_len；_i++）{
file=files[_i]；
file.status=Dropzone.SUCCESS；
这个.emit（“success”，file，responseText，e）；
这个.emit（“完成”，文件）；
this.files2=this.files2.filter（函数（e）{return e.status==“queued”}）；//删除已完成或已上载的文件
}
if（this.options.uploadMultiple）{
这个.emit（“successmultiple”，files，responseText，e）；
这个.emit（“completemultiple”，文件）；
}
if（this.options.autoProcessQueue）{
返回此.processQueue（）；
}
否则{
if（typeof this.files2！=“undefined”&&this.files2.length>0）{
this.processFiles（this.files2.slice（0,1））；//处理下一个文件（如果有）
}
}
};

我使用带有选项（autoProcessQueue:false）的dropzone，它只上载2个文件，而不是我的整个文件。我找到了解决办法

这个想法很简单（bcs我们想要一个接一个地上传文件，记住选项！：D）

它上载多个文件，但限制为1个，上载一个文件后会触发下一个队列

希望它能帮助别人

这是我使用这个想法的代码（因为我有两个表单要上传，在上传完所有图片后，它将提交其他表单）

Dropzone.options.dropzoneForm={
paramName:“file”，//将用于传输文件的名称
自动处理队列：false，
addRemoveLinks：是的，
并行上传：1，
最大文件数：50，
自动处理队列：false，
自动排队：对，
dictDefaultMessage:“将文件放到此处或单击上载。”，
init：函数（）{
....
此.on（“完成”，函数（文件）{
if（this.getUploadingFiles（）.length==0&&this.getQueuedFiles（）.length==0）{
log（“END”，this.getQueuedFiles（）.length）；
}
否则{
Dropzone.forElement（“#dropzoneForm”）.processQueue（）；
}
});
}
};

如果您不想设置maxFiles（默认无限制）并使用所需值的并行上载。读这个

我已经通过设置行为解决了问题

autoQueue: false,
autoProcessQueue: true,

然后，当我想上传文件时，我只需使用以下命令将它们添加到队列中：

myDrop.enqueueFile(file)

但是，此方法只接受一个文件，对于我正在使用的多个文件：

myDrop.on("addedfiles", function(files){
 //wait confirmation, or do some processing with the files, then:

 files.forEach(function(file){
    myDrop.enqueueFile(file)
 })
}

请注意，“addedfiles”事件尚未出现在文档中。我捕获拖入dropzone或单击事件添加的所有文件

---

这很好，因为如果您使用“发送”事件来添加POST数据，或者使用“并行上载”，那么示例代码工作正常，不会干扰下一个文件。我正在使用Sweet Alert 2在上传图像之前询问一些标签。

这是因为

parallelUploads

如果在您的选项中未设置，则默认为2。非常感谢！我花了半天时间来解决这个问题，终于找到了你的答案

myDrop.enqueueFile(file)

myDrop.on("addedfiles", function(files){
 //wait confirmation, or do some processing with the files, then:

 files.forEach(function(file){
    myDrop.enqueueFile(file)
 })
}