如何限制 dropzone.js 中的最大“总”文件大小？

Posted 2023-02-24

【中文标题】如何限制 dropzone.js 中的最大“总”文件大小？

【英文标题】：How to limit the max "total" file size in dropzone.js?

【发布时间】：2015-09-16 16:09:43

【问题描述】：

目前我使用 dropzone 来处理 Jquery 中的文件上传。到目前为止，它工作正常。

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

由于服务器（php.ini）也有“总”文件大小限制，我想知道如何在 dropzone.js 中限制它？

非常感谢。

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

【问题讨论】：

您可以控制每个文件的最大文件上传大小，同时还可以控制上传文件的最大数量。这就是你要找的吗？

【参考方案1】：

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

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 不得超过的最大值。

【参考方案2】：

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

...
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');

                            
                      );
                 

【参考方案3】：

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

在那里搜索 post_max_size ..假设把它放在 100M ，然后

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

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

【参考方案4】：

我只看到maxfilesize、paralleluploads 和maxfiles

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

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

... 计算文件大小并在超过总文件大小时禁用提交按钮。

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

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