javascript 如何触发 Dropzone.js 的默认文件上传输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24477532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger the Dropzone.js' default file upload input?
提问by Répás
I'd like to know how to trigger the Dropzone.js' default file upload input? It's not as simple like this:
我想知道如何触发 Dropzone.js 的默认文件上传输入？它不像这样简单：
window.dropCloud = = new Dropzone("#dropCloud", {...});
$(window.dropCloud.clickableElements[0]).trigger("click");
Now i don't have any ideas. Anyway the whole #dropCloudcontainer is hidden, if it matters.
现在我没有任何想法。无论如何#dropCloud，如果重要的话，整个容器都是隐藏的。
回答by Dave Geurts
This seems to work great for me
这似乎对我很有用
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();
回答by FooBar
Simple. In version 4.0 you can do:
简单的。在 4.0 版中，您可以执行以下操作：
new Dropzone(".element", {
clickable: '.myTrigger'
});
new Dropzone(".element", {
clickable: ['.myTrigger', '.myOtherTrigger']
});
回答by darklow
I had same problem and after quite a time of trying, i finally found a way how to add additional clickable areas to existing DropZone upload form.
我遇到了同样的问题，经过一段时间的尝试，我终于找到了一种方法，如何向现有的 DropZone 上传表单添加额外的可点击区域。
Note: There must be at least one "original" clickable area attached initially by clickableparameter.
注意：必须至少有一个最初由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();
Basically what i do is
基本上我做的是
- Add new clickable DOM element to
DZ.clickableElements. - Clone last
DZ.listenersarray object. - Replace
elementproperty innew_listenerobject with ours. - Add both
new_clickableandnew_listenerback to DZ. - Call
DZ.disable()andDZ.enable()which reattaches all the event handlers.
- 将新的可点击 DOM 元素添加到
DZ.clickableElements. - 克隆最后一个
DZ.listeners数组对象。 - 用我们的替换对象中的
element属性new_listener。 - 将两者添加
new_clickable并new_listener返回 DZ。 - 调用
DZ.disable()并DZ.enable()重新附加所有事件处理程序。
回答by Répás
Sigh... I think its the ugliest solution I've made... While init fn running.
叹息……我认为这是我做过的最丑陋的解决方案……当 init fn 运行时。
this.clickableElements.push($("#anotherUploadBtn")[0]);
this.clickableElements.forEach(function(y){ ....
Any better ideas?
有什么更好的想法吗？
回答by user3601800
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
},
});
