Dropzone.js не работает должным образом

Question

У меня есть сценарий dropzone, который загружает файл в определенный каталог. Я уже много читал документацию, но все же я застрял. У меня есть этот JS:

$(document).ready(function() { 
    Dropzone.autoDiscover = false; 
    var selectorElement = '.fileUploader'; 
    var selector = $(selectorElement); 

    selector.addClass('dropzone'); 
    selector.dropzone({ 
     dictInvalidFileType: 'Kan bestand niet uploaden: ongeldige extensie.', 
     dictFileTooBig: 'Kan bestand niet uploaden: bestand te groot.', 
     dictResponseError: 'SERVER ERROR', 
     paramName: 'file[]', // The name that will be used to transfer the file 
     maxFilesize: 1000, // MB 
     url: 'ajax/uploadFile.php', 
     addRemoveLinks: true, 
     enqueueForUpload: true, 
     uploadMultiple: true, 
     sending: function (file, xhr, formdata) { 
      formdata.append('uploadPath', $(this)[0].element.dataset.uploadpath); 
      $(this).css({width: $(this)[0].element.getAttribute('width'), height: $(this)[0].element.getAttribute('height')}); 
     }, 
     init: function() 
     { 
      var myDropzone = this; 

      this.on('maxfilesexceeded', function (file) { 
       this.removeFile(file); 
      }); 

      this.on('removedfile', function (file) { 
       if (file.previewTemplate.children[6]) 
       { 
        var filePath = this.element.dataset.uploadpath + file.previewTemplate.children[6].value; 
        $.post('ajax/deleteFile.php', {file: filePath}, function (response) { 
         CMSnotification(response.message, response.type); 
        }, 'JSON'); 
       } 
      }); 

      this.on('successmultiple', function (files, response) { 
       var responseJSON = JSON.parse(response); 
       CMSnotification(responseJSON.melding, responseJSON.type); 

       if (responseJSON.type === 'foutmelding') 
       { 
        for (var i = 0; i < files.length; i++) 
        { 
         var previewTemplate = $(files[i].previewTemplate); 
         previewTemplate.children('.dz-success-mark').css('display', 'none'); 
         previewTemplate.children('.dz-error-mark').css('display', 'block'); 
         previewTemplate.removeClass('dz-success').addClass('dz-error'); 
        } 
       } 

       for (var i = 0; i < files.length; i++) 
       { 
        var previewTemplate = $(files[i].previewTemplate); 

        if (!responseJSON.files[i]) 
        { 
         previewTemplate.children('.dz-success-mark').css('display', 'none'); 
         previewTemplate.children('.dz-error-mark').css('display', 'block'); 
         previewTemplate.removeClass('dz-success').addClass('dz-error'); 
        } 
        else 
        { 
         previewTemplate.append('<input type="hidden" name="fileNames[]" value="' + responseJSON.fileNames[i] + '">'); 
         previewTemplate.append('<input type="hidden" name="extensions[]" value="' + responseJSON.extensions[i] + '">'); 
        } 
       } 
      }); 
     }, 
     accept: function (file, done) { 
      var extension = file.name.split('.').pop(); 
      extension = extension.toLowerCase(); 
      if ($.inArray(extension, window.allowedFileDropzoneExtensions) > -1) { 
       done(); 
      } 
      else { 
       done('Bestands extensie niet toegestaan.'); 
      } 
     } 
    }); 
}); 

Первая проблема, я включил этот файл один раз и до сих пор он дает уже закрепленное Dropzone об ошибке. Но самая большая проблема заключается в следующем:

Dropzone довольно несовместим. Для 3 файлов он вызывает 3 файла запроса. Для 8 файлов он может вызывать 4 файла запроса. Но он должен просто позвонить 1. Проблема заключается в том, что если я позволю пользователю дать обратный вызов в качестве параметра в функции и вызвать его в событии успешности загрузки, он будет вызывать этот обратный вызов несколько раз (но он должен просто вызвать его один раз).

Answer 1

Первая проблема заключается в том, что у вас есть инструкция Dropzone.autoDiscover = false внутри функции .ready(), и это вызывает ее запуск до конца. Переместите этот оператор за пределы функции .ready().

Dropzone.autoDiscover = false; 
$(document).ready(function() { 
    ......... 
}) 

Второе связано с так Dropzone работает, по умолчанию опция autoProcessQueue устанавливается истина, и Dropzone закачивает файлы сразу после того, как они будут добавлены. Но я думаю, что нет гарантии того, сколько файлов будет загружено сразу, но я думаю, что по умолчанию никогда не будет загружать больше двух.

Решение состоит в том, чтобы вручную запустить загрузку файлов, для этого вам необходимо установить autoProcessQueue к ложному, просто привести пример вы можете использовать кнопку, которая вызывает загрузку внутри опции init добавить прослушиватель событий для кнопки, которая запускает метод processQueue(). Вот пример этого решения:

HTML:

<button type="button" id="submit-all">Submit All</button> 

ЯШ:

selector.dropzone({ 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    init: function() { 
     var submitButton = document.querySelector("#submit-all"); 
     myDropzone = this; 
     submitButton.addEventListener("click", function() { 
      myDropzone.processQueue(); 
     }); 
    } 
}) 

Я просто включил соответствующую часть для этого, чтобы работать, вы можете добавить это к существующей конфигурации. Это также решит вашу проблему для события successmultiple.