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>

我正在初始化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);

})();
最佳答案
问题不在于字段是否附加到正文,而是整个Dropzone上传过程与正常表单提交不同.

您不能使用Dropzone在浏览器中删除文件,然后使用普通表单提交来提交它.

有两种方法可以完成您的工作:

>在Dropzones中的所有文件都已上传之前,不要让用户提交表单(或者更好的是:在所有Dropzones上传后立即在所有Dropzones上创建事件监听器将触发表单上的提交功能).您需要将文件存储在服务器上并等待实际的表单提交以组装数据.

这是迄今为止最优雅的解决方案,因为这种方式文件已经上传,而用户可能仍在编辑表单数据.
>在实际表单上创建一个Dropzone,它将通过AJAX处理表单的整个上传. (参见文档).如果你想在dropzone中使用不同的dropzone目标,你必须单独创建它们,并将文件drop“委托”到主dropzone(基本上,只需获取文件对象,然后将其添加到主Dropzone).

转载注明原文:javascript – 在一个表单中使用单独的Dropzones上传多个单个文件 - 代码日志