背景
Dropzone.js 是一款优秀的前端文件上传插件，但在实际使用中可能会遇到 autoProcessQueue 参数设置为 false 时，仅上传两个文件的问题。
例如，在以下代码中：
var myDropzone = new Dropzone("div#my-dropzone", {
autoProcessQueue: false,
// 其他参数
});当将 autoProcessQueue 参数设置为 false，并在用户选择了多个文件后手动触发上传事件，可能只有前两个文件被成功上传，其他的文件则上传失败。这是因为 Dropzone.js 在默认情况下只会处理队列中的前两个文件，而剩余的文件则会被忽略。
解决方案
要解决这个问题，我们需要手动控制 Dropzone.js 的上传过程，使其能够正常处理所有文件。具体来说，可以通过以下步骤实现：
- 监听上传按钮的点击事件，手动触发上传：
document.querySelector("#upload-button").addEventListener("click", function () {
myDropzone.processQueue(); // myDropzone 为 Dropzone 实例
});- 取消 Dropzone.js 的默认上传处理，自定义上传逻辑：
-- -------------------- ---- -------
-------------------------- -------- ------ -
-- ------------------------
-----------------------
---
------------------------------ -------- -- -
-- ---------------------
---------------- ----- ---- ---- ------------
---需要注意的是，在以上代码中，我们使用了 enqueueFile(file) 方法来手动将文件加入上传队列，并在 addedfile 事件中监听用户添加文件的操作。同时，也需要在 queuecomplete 事件中执行自己的上传完成逻辑，因为 Dropzone.js 默认处理上传成功后会自动触发页面刷新或跳转。
示例代码
以下是一个完整的示例代码，展示了如何通过手动控制 Dropzone.js 的上传过程，解决 autoProcessQueue 参数设置为 false 时仅上传两个文件的问题：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ --------------
----- ---------------- ----------------------------------------------------------------------------------
-------
------
---- ---------------- -----------------------
------- ------------------------- --------------
------- -----------------------------------------------------------------------------------------
--------
--- ---------- - --- --------------------------- -
----------------- ------
---- -----------------
---
------------------------------------------------------------------ -------- -- -
--------------------------
---
-------------------------- -------- ------ -
-----------------------
---
------------------------------ -------- -- -
---------------- ----- ---- ---- ------------
---
---------
-------
-------结论
通过以上方法，我们可以解决 Dropzone.js 设置 autoProcessQueue 为 false 时仅上传两个文件的问题。同时，我们也了解到了如何手动控制 Dropzone.js 的上传过程，并在其中添加自定义逻辑。这对于深入理解和学习该插件具有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31020