[英]How to trigger the Dropzone.js' default file upload input?
I'd like to know how to trigger the Dropzone.js' default file upload input? 我想知道如何触发Dropzone.js的默认文件上传输入? It's not as simple like this: 这不像这样简单:
window.dropCloud = = new Dropzone("#dropCloud", {...});
$(window.dropCloud.clickableElements[0]).trigger("click");
Now i don't have any ideas. 现在我没有任何想法。 Anyway the whole #dropCloud
container is hidden, if it matters. 无论如何,如果重要的话,整个#dropCloud
容器都是隐藏的。
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();
Simple. 简单。 In version 4.0 you can do: 在4.0版中,您可以:
new Dropzone(".element", {
clickable: '.myTrigger'
});
new Dropzone(".element", {
clickable: ['.myTrigger', '.myOtherTrigger']
});
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 clickable
parameter. 注意:必须至少有一个“原始”可点击区域最初由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 基本上我做的是
DZ.clickableElements
. 将新的可点击DOM元素添加到DZ.clickableElements
。 DZ.listeners
array object. 克隆最后一个DZ.listeners
数组对象。 element
property in new_listener
object with ours. 用new_listener
替换new_listener
对象中的element
属性。 new_clickable
and new_listener
back to DZ. 将new_clickable
和new_listener
都添加回DZ。 DZ.disable()
and DZ.enable()
which reattaches all the event handlers. 调用DZ.disable()
和DZ.enable()
重新DZ.enable()
所有事件处理程序。 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? 有更好的想法吗?
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
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.