前言
Plupload 是一款非常优秀的文件上传插件，它支持 HTML5、Flash、Silverlight、HTML4 等多种上传方式，同时支持上传进度、分块上传等高级功能。而 plupload_2.1.9 是 Plupload 的一个 NPM 包，今天我们来深入了解一下其使用方法。
安装
首先，在您的项目中安装 Plupload 的 NPM 包：
npm install plupload_2.1.9
然后，在您的 HTML 文件中引入 Plupload 上传文件和文件队列的控件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- --------------
------- ------- ------- ---- ------ ----------- -- ----- ------------
------
------- ---------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
------- ------------------------
-------
-------初始化
Plupload 对象的初始化一般分为两步：
- 创建一个包含必要参数的配置对象。
- 使用配置对象创建一个 Plupload 对象。
配置对象
配置对象是一个 JavaScript 对象，它保存着 Plupload 对象的全部配置信息。下面是一个基本配置对象的实例：
-- -------------------- ---- -------
--- -------- - --- -------------------
-- ------
---- --------------
-- --------------------
-------------- --------
-- -------
--------------- --
-- -------------------
----------- -------
-- ------
-------- -
------- ------ ------- ----------- ------------------------
------- ---- ------- ----------- ----------
-
---配置对象的详细说明可以参考 Plupload 官方文档。
Plupload 对象
配置对象创建完成后，我们需要使用它来创建一个新的 Plupload 对象。可以通过下面这个语句来完成：
uploader.init();
然而，我们一般还需要在 Plupload 对象初始化完毕后通过回调函数来设置一些后续的操作，有以下几种常见类型：
- 用户添加文件时回调
- 用户删除文件时回调
- 开始上传时回调
- 上传进度回调
- 上传成功回调
- 上传失败回调
对于每一种情况，你可以对应一个函数来完成相应的操作。例如，下面是一个设置上传成功回调的代码：
uploader.init();
// 上传成功时回调
uploader.bind('FileUploaded', function(up, file, info) {
console.log(file.name + ' was uploaded.');
});界面展示
Plupload 提供了多种界面展示方式，最常见的是基于 JQuery 的上传队列方式。下面是一个基本的 HTML 文件，它演示了如何创建一个基于 JQuery 的上传队列：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- --------------
------- ------- ------- ---- ------ ----------- -- ----- ------------
------
------- ---------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
------- ------------------------
-------
-------在 JS 文件中，您需要创建一个 Plupload 对象，并指定一个 ID 用于标识上传队列：
-- -------------------- ---- -------
--- -------- - --- -------------------
---
---
----------------
-- --------------
------------------------------
-- ------- -- -- --- --- --------- --- ------ --------
--------- --------------------------------
---- -------------
---示例代码
下面是一个完整的示例代码，您可以直接复制到自己的项目中使用：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
----- ---------------- ----------------------------------------------------------------------------
-------
------
---- --------------
------- ------- ------- ---- ------ ----------- -- ----- ------------
------
------- ---------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
--------
-- --- -------- --
--- -------- - --- -------------------
-- ------
---- --------------
-- --------------------
-------------- --------
-- -------
--------------- --
-- -------------------
----------- -------
-- ------
-------- -
------- ------ ------- ----------- ------------------------
------- ---- ------- ----------- ----------
-
---
-- ---------
----------------------------- ------------ ----- ----- -
--------------------- - - --- ------------
---
-- --- -------- --
----------------
-- --------------
------------------------------
-- ------- -- -- --- --- --------- --- ------ --------
--------- --------------------------------
---- -------------
---
---------
-------
-------结语
Plupload 是一款非常优秀的文件上传插件，通过 NPM 包 plupload_2.1.9 的使用，我们可以轻松地将其整合到我们的前端项目中。希望本篇文章能够帮到你，感谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517881e8991b448cec66