如何手动触发 Dropzone 的点击（打开 select 文件对话框）

Question

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

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

还有这个

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

Answer 1

默认情况下，dropzone 仅适用于它自身的元素，如果您尝试运行手动触发，它将无法工作。在搜索了很多之后我能找到的最好方法是：

myDropzone.hiddenFileInput.click()

找到dropzone instant有几种方法：

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

2- Dropzone class 本身：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();

如何手动触发 Dropzone 的点击（打开 select 文件对话框）

How to manually trigger click for Dropzone (open select file dialog)

javascript

dropzone.js

dropzone