Комбинируйте нормальную форму с несколькими разбросами

Question

Я хочу иметь несколько дрозонов в форме. Таким образом, я создал форму

<form method="post"> 
    <div class="upload-files" data-name="mainImages[]" /> 
    <div class="upload-files" data-name="secImages[]" /> 
    <!-- could also be more --> 

    <input type="text" name="test" /> 

    <input type="submit" /> 
</form> 

Вводные дескрипторы инициализируются собственным paramName.

var dropzones = []; 
$('.upload-files').each(function() { 
    dropzones.push(new Dropzone('#' + $dropzone.attr('id'), { 
     paramName: $(this).data('name'), 
     // ... 
    } 
); 

this.dropzones = dropzones; 

Как отправить несколько дескрипторов с данными формы в один запрос? В настоящее время это похоже на submit.

// submit 
if (this.dropzones.length) { 
    return true; // normal form submit without dropzone 
} 

// dropzone submit form 
for (var i = 0, length = this.dropzones.length; i < length; i++) { 
    // TODO combine files with correct paramNames 
} 

Я знаю, что это https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone, но это только для одного DropZone в одной форме.

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

Answer 1

Я нашел решение для работы с несколькими dropzone на форме submit, вам нужно сделать следующее.

if (!this.dropzones.length) { 
    // default form submit 
    return true; 
} 

// submit over dropzone 
event.preventDefault(); 
this.dropzones[0].processQueue(); 

return false; 

Это вызовет процесс обработки первой зоны падения. Знайте, что нам нужно добавить другие файлы dropzones к отправке в случае отправки нескольких событий

init: function() { 
    this.on('sendingmultiple', function(data, xhr, formData) { 
     // add other form fields 
     $.each($form.serializeArray(), function(index, item) { 
      formData.append(item.name, item.value); 
     }); 

     // add other dropzone files 
     for (var i = 1, length = this.dropzones.length; i < length; i++) { 
      var files = this.dropzones[i].getQueuedFiles(); 

      for (var x = 0, fileLength = files.length; x < fileLength; x++) { 
       formData.append(
        this.dropzones[i]._getParamName(x), 
        files[x], 
        files[x].name 
       ); 
      } 
     } 
    }); 
}