53

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

10 回答 10

52

添加parallelUploads:10(这是您的最大数量)

于 2013-09-04T08:27:07.523 回答
36

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

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

“如果你想让autoProcessQueue在第一次上传后为真,那么只要监听处理事件,并设置this.options.autoProcessQueue = true;里面。”

所以只需添加

this.on("processing", function() {
    this.options.autoProcessQueue = true;
});
于 2014-02-19T18:23:07.740 回答
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 回答
7

很晚了,但也许它会帮助某人。

我注意到当我将 maxFilesSize 放在 parallerUploads 上面时它不起作用。

所以选项的顺序应该是 .

.
.
parallelUploads: 20,    
maxFilesize: 2, 
maxFiles: 20,
.
.
于 2017-01-25T09:57:29.230 回答
4

添加过载两个事件,如

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

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 回答
3

我使用带有选项(autoProcessQueue:false)的这个dropzone,它只上传2个文件而不是我的整个文件。我在 git's issue 的 oligoil 的回答中找到了这个解决方法

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

它上传多个但限制为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();
                }
            });
        }
    };
于 2019-07-04T16:29:09.747 回答
2

如果您不想设置 maxFiles(默认无限制)并使用具有所需值的 parallelUploads。读这个!

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

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

请注意,“addfiles”事件尚未出现在文档中。我捕获所有拖入拖放区或由点击事件添加的文件。

这很好,因为如果您使用“发送”事件来添加 POST 数据或“parallelUploads”,示例代码可以正常工作并且不会与下一个文件混淆。我正在使用 Sweet Alert 2 在上传图像之前询问一些标签。

于 2020-05-08T15:49:54.683 回答
0

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

首先,允许uploadMultiple 接下来,将这行代码改成dropzone.js:

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

为了

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

于 2013-10-30T17:55:13.090 回答
0

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

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

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

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
      }
  }
};
于 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 回答