在前端开发中，上传文件是一个非常常见的需求。如果每个项目都自己建一个上传文件的组件，那工作量实在是太大了。幸运的是，这个时候 npm 包就可以派上用场了。今天我要介绍的是一个非常好用的上传文件的 npm 包，它的名字叫做 jquery-fileuploader。
安装
安装 jquery-fileuploader 很简单，只需要在终端输入以下指令：
npm install jquery-fileuploader --save
安装完成之后，我们就可以在项目的代码中调用这个包了。
使用
下面我将演示如何在项目中使用 jquery-fileuploader 包来实现上传文件的操作。
首先，我们需要在 HTML 模板中加入上传文件的按钮：
<input type="file" id="fileUploader" name="files[]" multiple="multiple" />
接下来，我们需要引入 jquery 和 jquery-fileuploader：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="path/to/jquery.fileuploader.min.js"></script> <link rel="stylesheet" type="text/css" href="path/to/jquery.fileuploader.css" />
接下来，我们需要在 JavaScript 代码中初始化 jquery-fileuploader，并组织上传文件的信息：
-- -------------------- ---- -------
---------------------------------
---- ---------------------
------ ---
----------- ------- ------- -------
--------- -
------- ---------- -
------ ------- --------
--
--------- --------------- -
------ --------- - - ----- - - -------
-
--
------- -
----- -
-------- ---
--
----- ------
-
---上面的代码中，我们指定了上传文件的地址是 upload.php，限制了最多上传 10 个文件，并且只能上传扩展名为 jpg、jpeg 和 png 的文件。我们还自定义了按钮和反馈信息的显示，并且通过 upload 属性指定了上传时需要传递的数据和请求方式。
现在我们已经完成了 jquery-fileuploader 的初始化，用户上传文件之后我们就可以处理上传的数据了。我们可以监听事件获取上传的文件信息，并进行后续的处理：
$('#fileUploader').find('.fileuploder-list').on('upload.success', function(event, response) {
console.log(response);
});上面的代码中，我们监听了 upload.success 事件，当上传成功后就可以获取到服务器返回的响应数据了。我们可以在控制台输出这些数据，也可以进行其他的操作，例如将上传的图片显示在页面上等等。
示例代码
下面是一个完整的示例代码，你可以参考其中的内容来实现上传文件的操作：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------- ------------
------- --------------------------------------------------------------------------------
------- --------------------------------------------------
----- ---------------- --------------- -------------------------------------- --
-------
------
-------------
------ ----------- ----------------- -------------- ------------------- --
--------
------------ -
---------------------------------
---- ---------------------
------ ---
----------- ------- ------- -------
--------- -
------- ---------- -
------ ------- --------
--
--------- --------------- -
------ --------- - - ----- - - -------
-
--
------- -
----- -
-------- ---
--
----- ------
-
---
----------------------------------------------------------------- --------------- --------- -
----------------------
---
---
---------
-------
-------总结
在开发过程中使用 npm 包非常方便，能够大大缩短开发的时间，提高开发效率。使用 jquery-fileuploader 包，我们可以轻松实现上传文件的功能，而且还支持自定义按钮和反馈信息等功能，非常灵活。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005755e81e8991b448ea534