更多技术文章请访问我的博客园账户：点击这里
那边会更新有关生物信息学，java Web，统计学理论和一些杂七杂八的记录：）
leetcode刷题记录争取日更(github)：点击这里
bootstrap fileinput是一款非常优秀的HTML5文件上传插件，支持bootstrap 3.x 和4.x版本，能最简单的帮你完成文件上传功能，且使用bootstrap样式。还支持多种文件的预览，images, text, html, video, audio, flash。另外还支持ajax方式上传文件，可以看到上传进度。支持拖拽的方式添加和删除文件。
文档：http://www.bootstrap-fileinput.com/
demos：https://plugins.krajee.com/file-input/demo
安装：在上面网站或github下zip包，直接复制css和js去自己的项目
使用：
1. 引用资源的顺序
bootstrap --》jquery --》fontawesome然后再bootstrap-fileinput（css和js都是）；一般css放<head>，js放最后。
2.基础使用会用到的资源
css：
<link href="/写你自己的路径/fileinput.css" rel="stylesheet">
js：如果要多语言(翻译)，{lang}.js要放在fileinput.js后
<script src="/写你自己的路径/fileinput.js"></script>
<script src="/写你自己的路径/zh.js"></script>
3.简单例子
// 上传gene文件的控件初始化
$("#input-gene").fileinput({
// 按钮上显示中文
language:'zh',
// 去除upload按钮
showUpload: false,
// 浏览按钮上的文字
browseLabel: '浏览',
})
前端
<input id="input-gene" name="input-gene" type="file" class="file" data-show-preview="false">
如果不初始化，默认情况下是：
上传一个文件后：
经过此番设置后，上传前：
上传一个文件后：
设置方法参见文档的配置项部分：
http://www.bootstrap-fileinput.com/options.html
网友评论