Dropzone.js 是一个开源的 JavaScript 库，用于创建漂亮的拖放区域（drag and drop）来上传文件。它支持多文件上传，自动缩略图生成和进度条等功能，而且非常易于使用。在本文中，我们将讨论如何在所有文件上传完成后执行某些操作。
如何使用 Dropzone.js
要使用 Dropzone.js，您需要在 HTML 文件中引入 Dropzone 的 CSS 和 JavaScript 文件。您还需要为上传文件的区域指定一个 ID 或类名，并实例化 Dropzone 对象。以下是一个基本示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ---------------
----- ---------------- --------------------------------------------------------------------------------- --
-------
------
----- ---------------- ---------------- --------------------------------
------- -----------------------------------------------------------------------------------------
--------
--- ---------- - --- ---------------------------------
---------
-------
-------在这个例子中，我们将表单元素转换成了一个带有 "dropzone" 类的 div 元素，并且为它设置了一个 ID。我们还实例化了一个 Dropzone 对象，将其绑定到这个 div 元素上。现在，我们已经能够使用 Dropzone 来上传文件了。
所有文件上传完成后执行某些操作
当用户上传一个或多个文件时，Dropzone 会自动将它们添加到队列（queue）中，并开始上传它们。默认情况下，上传完成后，Dropzone 会从队列中删除文件并显示一个成功的消息。但是，您可能希望在上传完所有文件后执行一些其他操作，比如跳转到另一个页面、向服务器发送请求等等。
为了实现这个目标，Dropzone 提供了一个 complete 事件，该事件会在所有文件上传完成后触发。您可以通过监听这个事件来执行任何需要的操作。以下是一个示例：
-- -------------------- ---- -------
--- ---------- - --- -------------------------------- -
---- ----------
----------------- ------
----- ---------- -
-------------------- -------------- -
------------------ ----- - - -----------
---
------------------- ---------- -
---------------- ----- ---- ---- -----------
---
--------------------------------------------------------------- ----------- -
-------------------
--------------------
--------------------------
---
-
---在这个示例中，我们首先禁用了自动处理队列（autoProcessQueue），这意味着文件不会在添加到队列时立即上传。相反，我们在添加文件时打印了一条消息，并在点击一个按钮后才开始处理队列（调用 processQueue 方法）。
注意，在 init 函数中，我们为 complete 事件添加了一个监听器，并在函数中打印一条消息。您可以在这个函数中执行任何需要执行的操作，比如跳转到另一个页面、向服务器发送请求等等。
结论
Dropzone.js 是一个非常实用的 JavaScript 库，可以帮助我们轻松地创建漂亮的拖放区域来上传文件。通过使用 complete 事件，我们可以在所有文件上传完成后执行任何需要的操作。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24487