forms - Dropzone - 多个实例获取 id

Question

我有多个 dropzone 表单

 <form action="/upload" class="dropzone" id="group1"></form>
 <form action="/upload" class="dropzone" id="group2"></form>
 <form action="/upload" class="dropzone" id="group3"></form>

如何获取文件放入的表单的 ID？

Answer 1

要像添加文件那样连接到 Dropzone 操作，您需要使用事件处理程序。 从文档：

Dropzone 在处理文件时触发事件，您可以通过在实例上调用 .on(eventName, callbackFunction) 轻松注册到这些事件。

因此，您需要手动实例化您的 Dropzones，才能访问该实例。

如果您使用 jQuery：

// Don't automatically instantiate, we'll do it manually
Dropzone.autoDiscover = false;

// Using the jQuery syntax shown in the docs    
$("#group1, #group2, #group3").dropzone({
    init: function() {
        var formID = this.element.attributes.id;
        this.on("addedfile", function(file) {
            console.log('Image dropped on form ID', formID);
        });
    }
}); 

如果您不使用 jQuery：

Dropzone.autoDiscover = false;

var dz = [],
    forms = document.getElementsByTagName('form');

for (var i = 0; i < forms.length; i++) {
    dz[i] = new Dropzone(forms[i], {
        init: function() {
            var formID = this.element.attributes.id;
            this.on("addedfile", function(file) {
                console.log('Image dropped on form', formID);
            });
        }
    });
}