Dropzone JS Global Events

Question

我可能有這個錯誤，但Dropzone JS似乎以非常奇怪的方式做事。 http://www.dropzonejs.com/#events

這是添加事件

Dropzone.options.myAwesomeDropzone = { 
    init: function() { 
    this.on("addedfile", function(file) { alert("Added file."); }); 
    } 
}; 

這是假設你知道什麼是myAwesomeDropzone的推薦方法。但是，如果您以編程方式創建它們，那麼您可能不知道myAwesomeDropzone是什麼。它可以是任何東西，例如如果基於某個ID在頁面上有三個不同的Dropzones，則標識符將不是myAwesomeDropzone，甚至是可以猜測的。

這將是很方便的能夠做到

$(".dropzone").on("addedfile", function(file) { 
    alert("hello"); 
}); 

但它不工作。我只想將全局事件附加到我的所有下拉列表中。

Answer 1

你可以在你的第二個片段中添加非常類似的dropzone。當初始化dropzone時直接附加配置。

new Dropzone(".dropzone", { 
        url: 'someUrl', 
        addedfile: function() { 
         alert('Hallo'); 
        } 
       }); 

Answer 2

如果在同一個頁面的幾個dropzones，你需要爲每一個有不同的配置，你必須單獨初始化每個之一。 正如我看到你使用jQuery知道你也可以使用已經包含在dropzone中的Dropzone jQuery插件來初始化dropzone元素。

作爲例子想象，每一個懸浮窗接受不同的文件類型：

Dropzone.autoDiscover = false; 

$("#dropzone1").dropzone({ 
    url: 'urlForDropzone1.php', 
    acceptedFiles: 'application/pdf', 
    init: function(){ 
    this.on("addedfile", function(file) { 
    alert("Added" + file.name + " on Dropzone 1."); 
    }), 
    this.on("success", function(file) { 
     alert(file.name " Uploaded from Dropzone 1") 
    }) 
    } 
}); 

$("#dropzone2").dropzone({ 
    url: 'urlForDropzone2.php', 
    acceptedFiles: 'image/*,.jpeg,.jpg,.png,.gif', 
    init: function(){ 
    this.on("addedfile", function(file) { 
    alert("Added" + file.name + " on Dropzone 2."); 
    }), 
    this.on("success", function(file) { 
     alert(file.name " Uploaded from Dropzone 2") 
    }) 
    } 
}); 

注意，首先你需要禁用自動發現功能，然後分別初始化每個懸浮窗，網址是可選的，不需要包括他們，如果你已經有他們在HTML中。

Answer 3

下面的工作，我的問題是，我有dropzone.js包括兩次，這使得Dropzone.autoDiscover = false;被忽略。

Dropzone.autoDiscover = false; 

$(".dropzone").on("addedfile", function(file) { 
    alert("hello"); 
});