触发 dropzone.js 的外部按钮 - Javascript

在使用 dropzone.js 时，我们通常是通过拖拽文件到页面上的容器中实现上传文件的。但是，有时候我们需要在页面中自定义一个按钮，点击该按钮后触发 dropzone.js 容器的打开文件选择窗口并上传文件。

下面是实现该功能的代码片段：

// HTML代码
<button id="triggerBtn">选择文件</button>
<div id="myDropzone" class="dropzone"></div>

// Javascript代码
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#myDropzone", {
  url: "/upload",
  autoProcessQueue: false
});

document.getElementById("triggerBtn").addEventListener("click", function() {
  myDropzone.hiddenFileInput.click();
});

在上述代码中，首先我们在页面中定义了一个按钮和一个 dropzone.js 容器。然后，我们通过 Dropzone.autoDiscover = false 禁用了自动解析页面上的容器并初始化 dropzone.js。

接着，我们手动创建了一个 dropzone.js 的实例 myDropzone，并指定了上传文件的地址和禁用自动上传的选项。

最后，我们通过 document.getElementById("triggerBtn") 获取到自定义的按钮元素，并添加了一个 click 事件处理程序。当用户点击该按钮时，我们通过 myDropzone.hiddenFileInput.click() 触发 dropzone.js 容器的打开文件选择窗口并上传文件。

以上就是如何使用外部按钮触发 dropzone.js 的方法。希望对你有所帮助！