使用单独的Dropzones以一种形式上传多个单个文件 [英] Uploading multiple single files using separate Dropzones in one form

问题描述

我有一个表单，您可以不断添加更多的行。

一行包含名称和头像等。

我想要使用Dropzone.js，使每个头像不同droppable字段。

每当我创建一个新的行，我创建一个新的Dropzone区域。这是好的，工作。

但是，当我提交表单，文件无处可查。我可以理解为什么，因为文件字段不在表单中，所以它们被追加到主体。

 < form> ; 
 
< div class =personid =person_1> 
< div class =avatar>< / div> 
< input type =textname =name_1/> 
< / div> 
 
 <！ - 那么这些是通过js  - >添加的。 
< div class =personid =person_2> 
< div class =avatar>< / div> 
< input type =textname =name_2/> 
< / div> 
< div class =personid =person_3> ...< / div> 
< div class =personid =person_4> ...< / div> 
<！ -  etc  - > 
 
< / form> 
  

我正在初始化头像上的dropzone div。

是否可以将它们添加到内部的文件字段中？

以下是发生了什么JS。

 （function（）{
 
 var count = 1; 
 var $ form = $（'form'）; 
 initDropzone（$（'＃person_1'））; 
 
 function addPerson（）{
 count ++; $ （$ form）; 
 var $ personDiv = $（'< div class =personid =person _'+ count +'> ...< / div& initDropzone（$ personDiv，count）; 
} 
 
函数initDropzone（$ el，count）{
 $ el.find（'。avatar'）。dropzone（{
 autoProcessQueue：false，$ b $ uploadMultiple：false，
 parallelUploads：100，
 maxFiles：1，$ b $ url url：'/'// dropzone需要一个url参数
 }）; 
} 
 
 
 $（'＃add_person'）。on（'click'，addPerson）; 
 
}）（）; 
  

解决方案

问题不在于字段被追加到但是，整个Dropzone上传过程与正常的表单提交不同。

您不能使用Dropzone在浏览器中删除文件，然后使用正常的表单提交并提交。

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

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





这是迄今为止最优雅的解决方案，因为这样文件用户可能仍在编辑表单数据。通过AJAX整个上传表单。 （请参阅文档）。如果你想在dropzone中使用不同的dropzone目标，你必须分别创建它们，并且把文件委托到主要的dropzone（基本上，只需要把文件对象，并将其添加到主Dropzone）。 p>




I have a form where you can continually add more rows.
One row contains name and avatar, etc.

I want to use Dropzone.js to make each avatar a different droppable field.

Whenever I create a new row, I'm creating a new Dropzone area. This is fine, and works.

However, when I submit the form, the files are nowhere to be found. I can understand why, because the file fields aren't in the form, they are appended to the body.

<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>

I'm initializing the dropzone on the avatar div.
Is it possible to add them to file fields inside the form?

Here's what's going on in the JS. It's dumbed down a little for brevity.

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

})();

解决方案

The problem is not that the fields are appended to the body, but that the whole Dropzone uploading process is different from a normal form submission.

You can not use Dropzone to drop files in the browser, and then use the normal form submit to submit it.

There are two ways to accomplish what you are doing:

1. Don't let the user submit the form until all your files in the Dropzones have uploaded (or better yet: create event listeners on all your Dropzones that will fire the submit function on the form as soon as all Dropzones have uploaded). You need to store the files on your server and wait for the actual form submission to assemble the data.

   This is by far the most elegant solution, because this way the files are already uploading while the user may still be editing form data.

2. Create one Dropzone on the actual form, that will handle the whole uploading of the form via AJAX. (See the docs for that). If you want different dropzone targets inside that dropzone, you'll have to create them separately, and "delegate" the file drops to the main dropzone (basically, just take the file object, and add it to the main Dropzone).

这篇关于使用单独的Dropzones以一种形式上传多个单个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！