简介
bootstrap-filestyle2 是一个基于 Bootstrap 的文件上传组件，在前端开发中比较常用。它支持自定义样式、显示文件名、上传进度等功能。本文将详细介绍 bootstrap-filestyle2 的使用方法，逐步带领读者实现一个文件上传功能。
安装
bootstrap-filestyle2 是一个 npm 包，因此可以通过 npm 安装。在终端中进入项目目录，输入以下命令：
npm install bootstrap-filestyle2 --save
此时，bootstrap-filestyle2 就被安装到了项目中。接下来，我们需要在 HTML 中引入相关文件。
引入文件
使用 bootstrap-filestyle2 需要引入 3 个文件：bootstrap-filestyle2.min.css、jquery.min.js 和 bootstrap-filestyle2.min.js。
-- -------------------- ---- -------
------
------
---------------------
----- ---------------- ---------------------------------------------------------------------------
-------
------
------ ----------- --------------- ----------------- -----------------------
------- ------------------------------------------------------
------- ----------------------------------------------------------------------------------
--------
----------------------------
---------
-------
-------上面的代码中，data-icon 表示是否显示图标，data-buttonText 表示按钮上的文字。filestyle() 是 bootstrap-filestyle2 提供的初始化方法，它将 file input 转换为 bootstrap-filestyle2 样式的文件上传组件。
自定义样式
bootstrap-filestyle2 为开发者提供了自定义样式的功能。只需要在初始化时传入一个对象即可。
$('#fileUpload').filestyle({
buttonClass: 'btn btn-primary',
buttonText: '选择文件',
afterUpload: function() {
alert('上传完成')
}
})上面的代码中，buttonClass 表示按钮的样式，buttonText 表示按钮的文本，afterUpload 表示上传完成后的回调函数。
除此之外，bootstrap-filestyle2 还提供了其他的选项，详见官方文档。
完整示例
-- -------------------- ---- -------
--------- -----
------
------
---------------------
----- ---------------- ---------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------
-------
------
---- ---------------- ------
------
---- ---------- ------
------ ---------------- -------------------------------
------ ----------- -------------------- --------------- ----------------- ---------------------
------
------- ------------- ---------- ------------------------
-------
------
------- ------------------------------------------------------
------- ----------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
--------
----------------------------
------------ ---- ---------------------
----------- -------
------------ ---------- -
-------------
-
--
---------
-------
-------上面的代码是一个完整的文件上传示例，包含了 Bootstrap 样式和 bootstrap-filestyle2 样式。在选择文件和上传完成时，会弹出提示框。读者可以根据需要进行修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4c91