多个Dropzone在一个页面中 [英] Multiple Dropzone in a single page

问题描述

我正在使用Dropzone而不创建一个dropzone表单。在这种情况下，我无法在我的页面中创建另一个Dropzone实例。

  var myDropzone1 = new Dropzone（
 document.body，
 {
 url：upload1... 
。 
。
。一些参数
}; 
 
 var myDropzone2 = new Dropzone（
 document.body，
 {
 url ：upload... 
。
。
。一些参数
}; 
  

当我这样做的时候，我得到错误 Dropzone已经连接了。

解决方案

这是可能的，但是你不能在同一个元素上绑定第二个dropdzone，就像你做的那样。 atm。试试这个...

HTML：

 < form action =/ file-upload class =dropzoneid =a-form-element>< / form> 
< form action =/ file-uploadclass =dropzoneid =an-other-form-element>< / form> 
  

JavaScript：

  var myDropzoneTheFirst = new Dropzone（
'＃a-form-element'，/ / drop zone元素1 
 {
 url：uploadUrl / 1
} 
）; 
 
 var myDropzoneTheSecond = new Dropzone（
'＃an-other-form-element'，//拖放区域元素2 
 {
 url：uploadUrl / 2

）; 
  

I'm using Dropzone without creating a dropzone form. It works great for me in this way.

But in this case I can not create another instance of Dropzone in my page.

var myDropzone1 = new Dropzone(
        document.body,
        {
            url : "upload1"...
            .
            .
            . some parameters
         };

var myDropzone2 = new Dropzone(
        document.body,
        {
            url : "upload'"...
            .
            .
            . some parameters
         };

When I do this, I'm getting the error Dropzone already attached.

解决方案

It's possible, but you can't bind a second dropdzone on the same element, as you did. 2 Dropzones on one element makes no sense. 2x document.body in your solution atm. Try this...

HTML:

<form action="/file-upload" class="dropzone" id="a-form-element"></form>
<form action="/file-upload" class="dropzone" id="an-other-form-element"></form>

JavaScript:

var myDropzoneTheFirst = new Dropzone(
        '#a-form-element', //id of drop zone element 1
        {
            url : "uploadUrl/1"
        }
    );

var myDropzoneTheSecond = new Dropzone(
        '#an-other-form-element', //id of drop zone element 2
        {
            url : "uploadUrl/2"
        }
    );

这篇关于多个Dropzone在一个页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！