Question

我想知道如何触发Dropzone.js＆＃39;默认文件上传输入？它并不像这样简单：

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

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

Answer 1

简单。在4.0版中，您可以执行以下操作：

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

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

Answer 2

这似乎对我很有用

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 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();

基本上我做的是

将新的可点击DOM元素添加到DZ.clickableElements。
克隆最后一个DZ.listeners数组对象。
将element对象中的new_listener属性替换为我们的。
将new_clickable和new_listener都添加回DZ。
调用DZ.disable()和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
        },

});

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

5 个答案: