当autoProcessQueue设置为false时,Dropzone.js仅上传两个文件

时间:2013-08-05 13:17:00

标签: javascript jquery file-upload dropzone.js

我使用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();
});

9 个答案:

答案 0 :(得分:37)

添加 parallelUploads:10 (这是你的最大号码)

答案 1 :(得分:27)

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

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

“如果你想在第一次上传后使autoProcessQueue为真,那么只需听取处理事件,并设置this.options.autoProcessQueue = true; inside。”

所以只需添加

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

答案 2 :(得分:14)

我的解决方案是:

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

答案 3 :(得分:4)

很晚但也许会帮助别人。

我注意到当我将maxFilesSize放在parallerUploads之上时,它没有用。

所以选项的顺序应该是

library(elastic)
connect()
mapping_create("shakespeare", "act", update_all_types = TRUE, body = '{
  "properties": {
    "speaker": { 
      "type":     "text",
      "fielddata": true
    }
  }
}')
res <- Search("shakespeare", "act", body = '{"sort":[{"speaker":{"order" : "desc"}}]}')
vapply(res$hits$hits, "[[", "", c("_source", "speaker"))
#> [1] "ARCHBISHOP OF YORK" "VERNON"             "PLANTAGENET"        "PETO"               "KING HENRY IV"     
#> [6] "HOTSPUR"            "FALSTAFF"           "CHARLES"            ""   

答案 4 :(得分:3)

添加过载两个事件,如

处理 - &gt;允许上传所有文件

queuecomplete - &gt;恢复正常

    init: function () {

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

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

    };

答案 5 :(得分:1)

我将此dropzone与选项(autoProcessQueue:false)一起使用,它仅上传2个文件,而不是整个文件。我发现了这种解决方法in the oligoil's answer at the git's issue

这个想法非常简单(bcs,我们要一个一个地上传文件,记住选项!:D)。

它上传多个文件,但限制为1个,上传一个文件后会触发下一个队列!

希望它能帮助到某人!

这是我使用该想法的代码(由于我有2个表格要上传,所有图像上传完毕后,它将提交其他表格)

isStopped

答案 6 :(得分:0)

我认为您可以允许uploadMultiple并更改dropzone.js文件。

首先,允许uploadMultiple 接下来,将此行代码更改为dropzone.js:

  

返回this.processFiles(queuedFiles.slice(0,parallelUploads - processingLength));

代表

  

返回this.processFiles(queuedFiles.slice(0,queuedFiles.length));

答案 7 :(得分:0)

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

单击发送后更改autoProcessingQueue(即使是临时)意味着如果您将另一个文件添加到dropzone而其他文件仍然排队,它将被上传而无需再次按send,这是我不想要的。而且我也不想使用setTimeout或busyloop。所以这里是如何做到这一点:

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

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

答案 8 :(得分:-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中的逻辑负责返回,因此在轮询中没有任何损害。