使用单独的 Dropzones 以一种形式上传多个单个文件

Question

我有一个表单，您可以在其中不断添加更多行。
一行包含姓名和头像等。

我想使用 Dropzone.js 让每个头像成为不同的可放置字段。

每当我创建一个新行时，我都会创建一个新的 Dropzone 区域。这很好，并且有效。

但是，当我提交表单时，找不到文件。我可以理解为什么，因为文件字段不在表单中，它们被附加到正文中。

<form>

  <div class="person" id="person_1">
    <div class="avatar"></div>
    <input type="text" name="name_1" />
  </div>

  <!-- then these are added via js -->
  <div class="person" id="person_2">
    <div class="avatar"></div>
    <input type="text" name="name_2" />
  </div>
  <div class="person" id="person_3">...</div>
  <div class="person" id="person_4">...</div>
  <!-- etc -->

</form>

我正在初始化 avatar div 上的 dropzone。
是否可以将它们添加到表单内部的文件字段中？

这是 JS 中发生的事情。为了简洁起见，它被简化了一点。

(function(){

  var count = 1;
  var $form = $('form');
  initDropzone( $('#person_1') );

  function addPerson() {
    count++;
    var $personDiv = $('<div class="person" id="person_'+count+'">...</div>').appendTo($form);
    initDropzone( $personDiv, count ); 
  }

  function initDropzone( $el, count ) {
    $el.find('.avatar').dropzone({
      autoProcessQueue: false,
      uploadMultiple: false,
      parallelUploads: 100,
      maxFiles: 1,
      url: '/' // dropzone requires a url param
    });
  }


  $('#add_person').on('click', addPerson);

})();

Answer 1

问题不在于字段附加到正文中，而是整个 Dropzone 上传过程与正常的表单提交不同。

不能使用Dropzone在浏览器中拖放文件，然后使用普通的表单提交来提交。

有两种方法可以完成你正在做的事情：

1. 在 Dropzones 中的所有文件都上传之前，不要让用户提交表单（或者更好的是：在所有 Dropzones 上创建事件侦听器，一旦所有 Dropzones 都有，就会在表单上触发 submit 函数上传）。您需要将文件存储在您的服务器上并等待实际的表单提交来组装数据。

   这是迄今为止最优雅的解决方案，因为这样文件已经在上传，而用户可能仍在编辑表单数据。

2. 在实际表单上创建 一个 Dropzone，它将通过 AJAX 处理整个表单的上传。 （请参阅文档）。如果您想要在该 dropzone 中使用不同的 dropzone 目标，则必须单独创建它们，并将文件“委托”到主 dropzone（基本上，只需获取文件对象，并将其添加到主 Dropzone）。