將正常形式與多個下拉列表組合

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; 

如何在一個請求中提交表單數據的多個dropzones？目前它在提交時看起來像這樣。

// 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。

我認爲我需要todo的是將文件從第二，第三，... dropzone添加到第一個提交時，但我不知道如何處理該文件。

Answer 1

我發現了一個解決方案，可以在表單上使用多個dropzone進行工作，您需要提供以下內容。

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

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

return false; 

這將調用處理第一個dropzone。知道我們需要將其他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 
       ); 
      } 
     } 
    }); 
}