如何觸發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
        },

});