将正常形式与多个下拉列表组合

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 
       ); 
      } 
     } 
    }); 
}