Как ограничить максимальный размер файла «total» в dropzone.js?

Question

В настоящее время я использую dropzone для обработки загрузки файла в JQuery. Пока все работает нормально.

Единственная проблема заключается в том, что в конфигурации есть параметры maxFileSize, она ограничивает размер «одного» файла.

И поскольку сервер (php.ini) также имеет ограничение на общий размер файла, мне интересно, как ограничить это в 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 (что php.ini от апача, а не от PHP), потому что в dropzoneJS, я думаю, достаточно 500Мб для хранения один раз

поиск там post_max_size ..let скажем ставить он 100M и

upload_max_filesize = 50M ... или как вы предпочитаете!

Удачи вам в этом, и я надеюсь, что это полезно!

Answer 3

Немного поздно, но, возможно, кому-то это нужно. Ну, вам нужно создать новую переменную «totalSize» в функции init. Добавить listenner события в fileAdd для увеличения размера и еще один, чтобы substruct, потом немного Контрола, прежде чем отправить запрос, чтобы показать ошибку, я плохо с английским, так вот пример:

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

          } 
         }); 
       }