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

如果您在同一页面中有多个下拉区域，并且每个下拉区域都需要具有不同的配置，则必须单独初始化每个下拉区域。我看到你正在使用jQuery知道你也可以使用dropzone中已包含的Dropzone jQuery插件初始化dropzone元素。

例如，假设每个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")
    })
  }
});

请注意，首先您需要禁用自动发现功能，然后单独初始化每个dropzone，url是可选的，如果您已经在html中使用它们，则不需要包含它们。

Answer 2

你可以将dropzone与你的第二个片段非常相似。在初始化dropzone时直接附加配置。

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

Answer 3

以下是有效的，我的问题是我有两次dropzone.js，这使Dropzone.autoDiscover = false;被忽略。

Dropzone.autoDiscover = false;

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

Dropzone JS全球活动

3 个答案: