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在浏览器中删除文件，然后使用普通表单提交来提交。

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

不要让用户提交表单，直到Dropzones中的所有文件都已上传（或者更好的是：在所有Dropzones上创建事件监听器，将触发表单上的submit函数所有Dropzones都上传了）您需要将文件存储在服务器上，并等待实际的表单提交以组装数据。

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

在一个表单中使用单独的Dropzones上载多个单个文件

1 个答案: