Question

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

唯一的问题是，在配置中有一个maxFileSize选项，它限制了＆＃34;单个＆＃34;文件大小。

并且因为服务器（php.ini）也有一个＆＃34;总计＆＃34;文件大小限制，我想知道如何在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;

有＆＃34;添加了文件＆＃34; && 34; removedFile＆＃34;在添加和删除文件时，可用于更改跟踪文件大小的变量的事件。根据累积大小，将提交按钮设置为true或false。

Answer 2

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

在那里搜索post_max_size ..let，比如把它放到100M，然后

upload_max_filesize = 50M ......或者你更喜欢！

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

Answer 3

有点晚了但也许别人需要这个。好吧，你需要创建一个新变量＆＃34; totalSize＆＃34;在init函数中。将一个事件监听器添加到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不得超过的最大值。

如何限制最高＆＃34;总数＆＃34; dropzone.js中的文件大小？

4 个答案: