Dropzone.js是一种流行的开源JavaScript库，用于在网页上快速实现拖放文件上传功能。虽然该库已经提供了许多有用的功能，但我们可能会遇到需要向服务器发送自定义数据的情况。
本文将介绍如何使用Dropzone.js在每次文件上传时发送自定义数据，并提供示例代码以指导读者完成此任务。
步骤1: 添加自定义数据
首先，我们需要为Dropzone.js添加自定义数据。我们可以使用Dropzone的params选项来添加自定义数据。params选项是一个字典对象，其中键表示要传递到服务器的参数名称，值则是参数的值。
以下是一个添加自定义数据的示例：
// 创建Dropzone对象
var myDropzone = new Dropzone("#my-dropzone", {
// 设置URL和自定义参数
url: "/upload",
params: {
myParam: "param value"
}
});在这个示例中，我们创建了一个名为myDropzone的新Dropzone对象，并将params选项设置为包含单个键值对的对象。在每次文件上传时，Dropzone.js将会向服务器发送名为myParam的自定义参数，其值为"param value"。
步骤2: 获取文件信息并修改自定义数据
接下来，我们需要获取上传的文件信息，并根据实际需要修改自定义数据。Dropzone.js提供了一个sending事件，我们可以在该事件中获取文件信息并修改自定义数据。
以下是一个示例：
-- -------------------- ---- -------
-- ------------
--- ---------- - --- ------------------------ -
-- -----------
---- ----------
------- -
-------- ------ ------
--
-- ------------
-------- -------------- ---- --------- -
-- -----------------
------------------------- ---------
-
---在这个示例中，我们在sending事件处理程序中获取了当前上传的文件信息，并使用append方法将名为fileId的自定义数据添加到了form data中。这样，在每次文件上传时，Dropzone.js会向服务器发送包含文件ID和自定义数据的请求。
完整示例代码
下面是一个完整的Dropzone.js示例代码，其中包含了添加自定义数据和获取文件信息并修改自定义数据的代码：
-- -------------------- ---- -------
------
------
------------------ ---------------
---- ------------- --- ---
----- ---------------- ----------------------------------------------------------------------------------
-------
------
---- -------- ---
----- ---------------- ---------------- ------------------------
---- ------------- ---
------- -----------------------------------------------------------------------------------------
---- --------------------- ---
--------
-- ------------
--- ---------- - --- ------------------------ -
-- -----------
---- ----------
------- -
-------- ------ ------
--
-- ------------
-------- -------------- ---- --------- -
-- -----------------
------------------------- ---------
-
---
---------
-------
-------结论
在本文中，我们介绍了如何使用Dropzone.js在每次文件上传时发送自定义数据。通过添加自定义数据并利用sending事件，我们可以轻松地向服务器传递额外的信息。
如果您对此有任何疑问，请随时留言评论。谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29795