web-dev-qa-db-ja.com

1ページに複数のドロップゾーン

Dropzoneフォームを作成せずにDropzoneを使用しています。このように、私にとってはとてもうまくいきます。

しかし、この場合、ページにDropzoneの別のインスタンスを作成できません。

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

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

これを行うと、エラーDropzone already attached.

javascriptfile-uploaddropzone.js
13
mekafe

可能ですが、同じ要素に2番目のdropdzoneをバインドすることはできません。 1つの要素上の2つのドロップゾーンは意味がありません。ソリューションATMの2x document.body。これを試して...

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(
        //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"
        }
    );
24
lin

同じページの複数のドロップゾーンで問題が発生したため、ここに何かを追加します。

あなたの初期化コードであなたは覚えなければなりません参照を置く場合はvarを含めます。そうでなければ、それはドロップゾーンのこのインスタンスを処理せず、他のものにアクセス/関連付けを試みます。

JavaScriptは単純ですが、大きな違いがあります。

init:       function(){
    var dzClosure = this;

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