在前端开发中，文件上传是一项常见而且重要的任务。而Bootstrap fileinput.js是一个功能强大的文件上传组件，提供了许多有用的功能，如文件预览、批量上传和拖放上传等。本篇文章将介绍Bootstrap fileinput.js并提供详细的使用指南。
安装和基本用法
安装Bootstrap fileinput.js非常简单。你可以通过npm或yarn进行安装：
npm install bootstrap-fileinput
然后，在你的HTML页面中引入以下CSS和JS文件：
<!-- 引入CSS文件 --> <link href="/path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/> <!-- 引入JS文件 --> <script src="/path/to/js/jquery.min.js"></script> <script src="/path/to/js/fileinput.min.js"></script>
接下来，你需要为文件上传组件创建一个HTML元素：
<input id="file-1" type="file" class="file">
最后，通过以下JavaScript代码初始化文件上传组件：
$("#file-1").fileinput({ theme: 'fas', uploadUrl: '/upload', allowedFileExtensions: ['jpg', 'png', 'gif'] });
在这个例子中，我们向文件上传组件传递了一些选项：
theme: 表示使用FontAwesome图标主题。uploadUrl: 表示上传文件的URL地址。allowedFileExtensions: 表示允许上传的文件扩展名。
文件预览
Bootstrap fileinput.js提供了一个非常方便的功能：文件预览。通过以下代码，我们可以让用户在选择文件后立即看到他们选择的文件：
-- -------------------- ---- ------- ------------------------ ---------------- -------- ------------ ---- ------------- ------------ ------- ----------- --- ---------- ------------------- -- ------------ ---- ------------ ------------ ----- ----------- --- ---------- ----------------- -- ------------ ---- ------------- ------------ ----- ----------- --- ---------- ---------------- -- ----------------- --------- ---展开代码
在这个例子中，我们向fileinput()方法传递了一些选项：
previewFileType: 表示只显示图片类型的文件。browseClass: 设置“浏览”按钮的CSS类。browseLabel: 设置“浏览”按钮的标签。browseIcon: 设置“浏览”按钮的图标。removeClass: 设置“删除”按钮的CSS类。removeLabel: 设置“删除”按钮的标签。removeIcon: 设置“删除”按钮的图标。uploadClass: 设置“上传”按钮的CSS类。uploadLabel: 设置“上传”按钮的标签。uploadIcon: 设置“上传”按钮的图标。allowedFileTypes: 设置允许上传的文件类型。
批量上传和拖放上传
Bootstrap fileinput.js还提供了一些其他有用的功能，如批量上传和拖放上传。通过以下代码，我们可以启用这两个功能：
-- -------------------- ---- ------- ------------------------ ------------ ----- ----------- ------ ------------- --- ---------------- ----- -------------- ---------- ------------------- ------------------ ---------------- - ------------------- ----- ------------------- ---------------- - - ---- ------------------------------- - - -------- ----------- - - --------- - - ---- -------------------------- - -------- - ---展开代码
在这个例子中，我们向fileinput()方法传递了一些选项：
uploadAsync: 启用异步上传。showUpload: 隐藏上传按钮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2436
