- 官网地址:http://plugins.krajee.com/
- 官网提供的样例：http://plugins.krajee.com/file-input/demo
基础用法
- 导入核心CSS及JS文件
<!--1、bootstrap.min.css2、fileinput.min.css3、jquery-3.2.1.min.js4、bootstrap.min.js5、fileinput.min.js 6、fileinput_locale_zh.js（可选择）--> ?<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> ?<link rel="stylesheet" type="text/css" href="css/fileinput.css"> ?<script type="text/javascript" src="js/jquery.js"></script> ?<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> ?<script type="text/javascript" src="js/fileinput.js"></script> ?<!-- 中文化，注意locale语言文件在fileinput.min.js文件之后引入 --> ?<script type="text/javascript" src="js/fileinput_locale_zh.js"></script>
- 基本file类型的表单的样式
???????<form method="POST" action="#"> ?????????<div class="form-group"> ???????????<label for="file">文件输入</label> ???????????<input type="file" name="file" id=‘myfile‘> ?????????</div> ?????????<input type="submit" name="submit" value=‘提交‘ class="btn btn-primary"> ???????</form>
初始化fileinput插件
<script type="text/javascript"> ???$(‘#myfile‘).fileinput(); ?</script>
完整的HTML文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>file-input demo</title><!-- 导入核心CSS及JS文件 --><!--1、bootstrap.min.css2、fileinput.min.css3、jquery-3.2.1.min.js4、bootstrap.min.js5、fileinput.min.js 6、fileinput_locale_zh.js（可选择）--> ?<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> ?<link rel="stylesheet" type="text/css" href="css/fileinput.css"> ?<script type="text/javascript" src="js/jquery.js"></script> ?<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script> ?<script type="text/javascript" src="js/fileinput.js"></script> ?<!-- 中文化，注意locale语言文件在fileinput.min.js文件之后引入 --> ?<script type="text/javascript" src="js/fileinput_locale_zh.js"></script><!-- /导入导入核心CSS及JS文件 --></head><body> ?<div class="container"> ???<div class="row"> ?????<div class="col-lg-6"> ???????<h1>fileinput插件基础样例</h1> ???????<!-- 基本file类型的表单的样式 --> ???????<form method="POST" action="#"> ?????????<div class="form-group"> ???????????<label for="file">文件输入</label> ???????????<input type="file" name="file" id=‘myfile‘> ?????????</div> ?????????<input type="submit" name="submit" value=‘提交‘ class="btn btn-primary"> ???????</form> ???????<!-- /基本file类型的表单的样式 --> ?????</div> ???</div> ?</div> ?<!-- 初始化fileinput插件 --> ?<script type="text/javascript"> ???$(‘#myfile‘).fileinput(); ?</script></body></html>
显示截图
问题及解决方法
本地Bootstrap文件字体图标无法显示：http://blog.csdn.net/nongweiyilady/article/details/53611094
简而言之，是因为我只引入了bootstrap.css文件，而这个css文件的字体图标是依赖于外部文件的，解决方法就是导入整个bootstrap文件夹，保证万无一失嘛
Bootstrap fileinput：文件上传插件的基础用法
原文地址：http://www.cnblogs.com/yolo-bean/p/7678486.html