javascript - 使用单独的 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 上创建事件监听器，以触发 submit 函数所有 Dropzones 上传后立即填写表格)。您需要将文件存储在您的服务器上，并等待实际的表单提交来组装数据。

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

2. 在实际表单上创建一个 Dropzone，它将通过 AJAX 处理整个表单上传。 (请参阅文档)。如果你想在那个 dropzone 内有不同的 dropzone 目标，你必须单独创建它们，并将文件“委托(delegate)”到主 dropzone(基本上，只需获取文件对象，并将其添加到主 Dropzone)。