这是一款Bootstrap 4自定义文件上传插件。该插件在原生bootstrap文件上传的基础上,添加了一些功能,例如显示单文件或多文件的文件路径等。
安装
可以通过npm来安装该插件。
npm install bs-custom-file-input --save
使用方法
在页面中引入jquery和bootstrap 4相关文件,以及bs-custom-file-input.js文件。
<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/bootstrap.min.js"></script> <script src="path/to/bs-custom-file-input.js"></script>
HTML结构
基本的HTML结构如下。
<div class="custom-file"> <input type="file" class="custom-file-input"> <label class="custom-file-label" for="inputGroupFile01">选择文件</label> </div> <div class="custom-file"> <input type="file" multiple class="custom-file-input"> <label class="custom-file-label" for="inputGroupFile01">选择多个文件</label> </div>
初始化插件
在页面DOM元素加载完毕之后,通过下面方法来初始化该插件。
$(document).ready(function () { bsCustomFileInput.init() })
该Bootstrap 4自定义文件上传插件的github地址为:https://github.com/Johann-S/bs-custom-file-input