Bootstrap 4自定义文件上传插件

这是一款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