javascript – 在一个表单中使用单独的Dropzones上传多个单个文件

2019-05-17 09:30:33 阅读：213 来源： 互联网

标签：jquery javascript file-upload forms dropzone-js

我有一个表单,您可以不断添加更多行.
一行包含名称和头像等.

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

标签：jquery,javascript,file-upload,forms,dropzone-js
来源： https://codeday.me/bug/20190517/1120295.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在一个表单中使用单独的Dropzones上传多个单个文件