Javascript 单个页面中的多个 Dropzone

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26657489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 23:12:10  来源:igfitidea点击:

Multiple Dropzone in a single page

javascriptfile-uploaddropzone.js

提问by mekafe

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

我正在使用 Dropzone 而不创建 dropzone 表单。它以这种方式对我很有用。

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

但在这种情况下,我无法在我的页面中创建另一个 Dropzone 实例。

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.

当我这样做时,我收到错误 Dropzone already attached.

回答by lin

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

这是可能的,但是您不能像以前那样在同一元素上绑定第二个 dropdzone。2 Dropzones 在一个元素上是没有意义的。解决方案 atm 中的 2x document.body。尝试这个...

HTML:

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:

JavaScript:

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

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

回答by Antony

I want to add something here because I have experienced problems with multiple dropzones on the same page.

我想在这里添加一些东西,因为我在同一页面上遇到了多个放置区的问题。

In your init code you must rememberto include var if putting a reference otherwise it isn't dealing with this instance of the dropzone rather trying to access/relate to the others.

在您的 init 代码中,您必须记住在放置引用时包含 var,否则它不会处理 dropzone 的这个实例,而是试图访问/关联到其他实例。

Simple javascript but makes a big difference.

简单的javascript,但有很大的不同。

init:       function(){
    var dzClosure = this;

    $('#Btn').on('click',function(e) {
        dzClosure.processQueue();
    });