Bootstrap 4自定义文件上传特效插件

Bootstrap 4自定义文件上传特效插件

这是一款Bootstrap 4自定义文件上传插件。该插件在原生bootstrap文件上传的基础上,添加了一些功能,例如显示单文件或多文件的文件路径等。

安装
可以通过npm来安装该插件。

1
npm install bs-custom-file-input --save

使用方法
在页面中引入jquery和bootstrap 4相关文件,以及bs-custom-file-input.js文件。

1
2
3
4
<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结构如下。

1
2
3
4
5
6
7
8
9
<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元素加载完毕之后,通过下面方法来初始化该插件。

1
2
3
$(document).ready(function () {
  bsCustomFileInput.init()
})

文件信息:

    0

    发表评论