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

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

我想使用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>

---

问题不在于字段被追加到主体中，而是整个Dropzone上传过程与普通表单提交不同

您不能使用Dropzone在浏览器中放置文件，然后使用普通表单submit进行提交

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

在Dropzones中的所有文件都上载之前，不要让用户提交表单（或者更好的做法是：在所有Dropzones上创建事件侦听器，在所有Dropzones上载后立即在表单上启动

submit

功能）。您需要将文件存储在服务器上，并等待实际的表单提交来组装数据

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

在实际表单上创建一个Dropzone，它将通过AJAX处理表单的整个上传。（见文件）。如果您希望在该dropzone内有不同的dropzone目标，则必须分别创建它们，并将文件“委托”到主dropzone（基本上，只需获取文件对象，并将其添加到主dropzone）

---

您可以让jQuery侦听表单中的提交事件，并在提交之前通过将Dropzone字段拉入表单元素（按照您的意愿组织）来做出反应。或者，您可以为每个Dropzone的

init

事件设置一个侦听器，并分别处理它们（）“每当我创建新行时，我都在创建一个新的Dropzone区域。”您可以向我们展示处理此问题的JavaScript代码吗？您应该能够将新的Dropzones附加到比

正文更具体的内容上

我用JSI更新了问题，得出了相同的结论。我劫持了提交事件，然后上传了文件，然后提交了表单。工作完美。你有很棒的插件。@enyo我知道你说过1是更优雅的解决方案，但是有可能得到更多关于2的信息吗？谢谢，很好的插件。

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

})();