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

Posted 2023-05-08

【中文标题】如何手动触发 Dropzone 的点击（打开选择文件对话框）

【英文标题】：How to manually trigger click for Dropzone (open select file dialog)

【发布时间】：2018-08-18 05:53:17

【问题描述】：

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

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

还有这个

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

【参考方案1】：

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

myDropzone.hiddenFileInput.click()

立即找到dropzone有几种方法：

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

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

现在可以了

【讨论】：

谢谢。知道您不需要 jquery 来访问任何 dropzone 元素也很有帮助。您也可以像这样简单地获取元素：var myDropZone = document.getElementById("dropzone-id").dropzone，尽管 jquery 也可以使用

为此，您必须传递clickable: true 或传递一个元素。否则，Dropzone 没有hiddenFileInput。

【参考方案2】：

在使用 vue dropzone 时，您可以使用以下行简单地打开文件对话框。

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

【参考方案3】：

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

#dropzone_dropzone 是我的 DIV 的名称

【参考方案4】：

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

【参考方案5】：

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

  @ViewChild(DropzoneDirective) dropzoneRef: DropzoneDirective;

  

在你的方法中

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

【参考方案6】：

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

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