如何在 dropzone.js 中限制最大 "total" 文件大小？

Question

目前我使用 dropzone 来处理 Jquery 中的文件上传。到目前为止一切正常。

唯一的问题是，在配置中有一个 maxFileSize 选项，它限制了 "single" 文件大小。

并且由于服务器 (php.ini) 也有 "total" 文件大小限制，我想知道如何在 dropzone.js?

中限制它

非常感谢。

http://www.dropzonejs.com/#configuration-options

Answer 1

我只看到 maxfilesize、paralleluploads 和 maxfiles

我认为您可能需要在添加文件时跟踪文件大小，可能使用

this.on("addedfile", function(file) { // perform task // });

...统计文件大小，如果超过总文件大小则禁用提交按钮。

document.getElementById('dropsubmit').disabled = false;

有 "addedFile" 和 "removedFile" 事件可用于更改跟踪文件大小的变量，因为文件被添加和删除。根据累积大小，将提交按钮设置为 true 或 false。

Answer 2

尝试修改您的 php.ini（来自 apache 的 php.ini，而不是来自 php），因为在 dropzoneJS 中，我认为 500mb 足以存储一次

在那里搜索 post_max_size ..让我们说 100M，然后

upload_max_filesize = 50M ...或者你喜欢怎样！

祝你好运，希望对你有所帮助！

Answer 3

有点晚了，但也许其他人需要这个。那么，您需要在 init 函数中创建一个新变量 "totalSize"。向 fileAdd 添加一个事件侦听器以增加大小，另一个用于子结构化，然后在发送请求之前进行一些控制以显示错误，我的英语不好，所以这里有一个例子：

...
init: function() {
   var totalsize = 0.0;
 ...
    this.on("addedfile", function(file) {
 ... 
// increment total size when we add a file (in Mb)
    totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));

//substruct the size of the removed file
      removeButton.addEventListener("click", function(e) {
      ...
         _this.removeFile(file);
      totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
     ...                      
      });
  ...             
  });
//and an event for the submission to controle before submit don't forget to prevent default
this.on("sendingmultiple", function(data, xhr, formData) {

if (totalsize <= 20) {
      //do the request
       }else { // else show the error
        $('#error').show();
       $('#error').text('Oooops ! total files size must be less then 20Mb');

                        }
                  });
}

可能不是很清楚，所以有一个完整的代码示例，在我的代码中我添加了一个样式化的删除按钮所以不要忘记删除它：

init: function() {
                    var totalsize = 0.0;
                    dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

                      // for Dropzone to process the queue (instead of default form behavior):
                      document.getElementById("submit-all").addEventListener("click", function(e) {
                          // Make sure that the form isn't actually being sent.
                          e.preventDefault();
                          e.stopPropagation();
                          dzClosure.processQueue();
                      });
                    this.on("addedfile", function(file) {
                        // Create the remove button
                        var removeButton = Dropzone.createElement("<a href='javascript:;'' class='btn red btn-sm btn-block'>Remove</a>");

                        // Capture the Dropzone instance as closure.
                        var _this = this;

                        // Listen to the click event
                        removeButton.addEventListener("click", function(e) {
                          // Make sure the button click doesn't submit the form:
                          e.preventDefault();
                          e.stopPropagation();

                          // Remove the file preview.
                          _this.removeFile(file);
                          totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
                          // If you want to the delete the file on the server as well,
                          // you can do the AJAX request here.
                        });

                        // Add the button to the file preview element.
                        file.previewElement.appendChild(removeButton);
                        //increment
                        totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));


                    });

                                    //send all the form data along with the files:
                      this.on("sendingmultiple", function(data, xhr, formData) {

                          if (totalsize <= 20) {
                            console.log(totalsize);
        //u can append formData here too
                            formData.append("something", jQuery("#something").val());
                          }else {
                              $('#error').show();
                              $('#error').text('Oooops ! total files size must be less then 20Mb');

                            }
                      });
                }

Answer 4

我发现这个解决方法定义了接受函数：

var totalsize = 0.0;
$("div#dropzone").dropzone({ 
    accept: function(file, done) {
        if (totalsize >= MAX_TOTAL_SIZE) {
            file.status = Dropzone.CANCELED;
            this._errorProcessing([file],  "Max limit reached", null);
        }else { 
            done();
        }
    }
    init: function() {
        this.on("addedfile", function(file) { 
            totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));
        });
        this.on("removedfile", function(file) {
            if(file.upload.progress != 0){
                totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
            }
        });
        this.on("error", function(file) {
            totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
        });
    }
});

其中 MAX_TOTAL_SIZE 是 dropzone 不得超过的最大值。

如何在 dropzone.js 中限制最大 "total" 文件大小？

How to limit the max "total" file size in dropzone.js?

php

jquery

file-upload

upload

dropzone.js