如何手动触发Dropzone的单击（打开选择文件对话框）

Question

Dropzone仅适用于元素本身我的按钮内部有SPAN标记，当我单击文本时，它不会触发单击dropzone附加到的父元素。我尝试了以下但它不起作用！

$('.dropzone').click();

还有这个

$('.dropzone').trigger('click');

Answer 1

默认情况下，dropzone仅对其自身的元素起作用，如果您尝试手动运行触发器，它将无法工作。搜索A LOT后我能找到的最佳方式是：

myDropzone.hiddenFileInput.click()

找到dropzone瞬间有几种方法：

1- jquery：var myDropZone = $('.dropzone').get(0).dropzone;或var myDropZone = $("div#dropmehere").dropzone({...});如果您使用ID来查找元素

2-由Dropzone类本身：var myDropzone = Dropzone.forElement("div#dropmehere");

现在你可以

Answer 2

以下内容对我有用$('#dropzone_dropzone').get(0).dropzone.hiddenFileInput.click();

其中#dropzone_dropzone是我的DIV的名称

Answer 3

使用vue dropzone时，只需使用下面的行打开文件对话框即可。

document.getElementsByClassName("dropzone")[0].click();

Answer 4

在这里参加聚会很晚，但是如果您正在寻找vue2-dropzone的解决方案（Dropzone.js的vue包装器），则可以给dropzone一个参考（例如<vue-dropzone ref=dropzone />），然后调用$refs.dropzone.$el.click()来触发文件上传对话框。

Answer 5

看看这个 solution ，它工作正常。如果您使用的是 Angular，则可以按以下步骤操作

  @ViewChild(DropzoneDirective) dropzoneRef: DropzoneDirective;

  

在你的方法中

this.dropzoneRef.dropzone().clickableElements[0].click();

Answer 6

在 5.7.2 版本中，以下所有内容都对我有用：

$("#dropzone")[0].click()
$("#dropzone").get(0).click()
document.getElementById("dropzone").click();