如何触发Dropzone.js的默认文件上传输入？

Question

我想知道如何触发Dropzone.js的默认文件上传输入？ 这不像这样简单：

window.dropCloud = = new Dropzone("#dropCloud", {...});
$(window.dropCloud.clickableElements[0]).trigger("click");

现在我没有任何想法。 无论如何，如果重要的话，整个#dropCloud容器都是隐藏的。

Answer 1

这对我来说似乎很有用

var dropZone = new Dropzone($("#yourdropzonedivthinger").get(0), {
BLAH BLAH BLAH drop zone init stuff
});

//Call this anywhere in your code to manually trigger the dropzone file dialog popup thinger

dropZone.hiddenFileInput.click();

Answer 2

简单。 在4.0版中，您可以：

new Dropzone(".element", {
    clickable: '.myTrigger'
});

new Dropzone(".element", {
    clickable: ['.myTrigger', '.myOtherTrigger']
});

Answer 3

我遇到了同样的问题，经过一段时间的尝试，我终于找到了一种方法，可以为现有的DropZone上传表单添加额外的可点击区域。

注意：必须至少有一个“原始”可点击区域最初由clickable参数附加。

var DZ = Dropzone.forElement('.dropzone'); // Change selector to yours
var new_clickable = $('.new-clickable')[0]; // Change selector to yours
var new_listener = jQuery.extend({}, DZ.listeners[DZ.listeners.length - 1]);
new_listener.element = new_clickable;
DZ.clickableElements.push(new_clickable);
DZ.listeners.push(new_listener);
DZ.disable(); 
DZ.enable();

基本上我做的是

1. 将新的可点击DOM元素添加到DZ.clickableElements 。
2. 克隆最后一个DZ.listeners数组对象。
3. 用new_listener替换new_listener对象中的element属性。
4. 将new_clickable和new_listener都添加回DZ。
5. 调用DZ.disable()和DZ.enable()重新DZ.enable()所有事件处理程序。

Answer 4

叹息......我认为这是我做过的最丑陋的解决方案......当init fn运行时。

this.clickableElements.push($("#anotherUploadBtn")[0]);
this.clickableElements.forEach(function(y){ ....

有更好的想法吗？

Answer 5

jQuery("#file-uploader").dropzone({
        url: "/upload/",
        paramName: "file",
        maxFilesize: 5,
        acceptedFiles: 'image/*,.jpeg,.jpg',
        autoProcessQueue: true,
        clickable: ['#file-uploader *','#file-uploader'],
        init: function() {
            this.hiddenFileInput.click(); //opens the file select dialogue
        },
        accept: function(file, done) {
            // some code
            done();
        },
        success: function (file, responseText)
        {
            var responseJSON = JSON.parse(responseText);

            // some code
        },

});