最近做文件上传想把界面做好看一点,原装HTML有点丑,H5 CSS3又写不出,偶然间看到强大的Bootstrap fileinput,借鉴了很多案例搜了很多版本试了很多版本,下面是我的心路历程
1.首先下载Bootstrap fileinput
引入必要的css 和 js 注意引入顺序 zh.js是需要引用的中文
<link rel="stylesheet" href="/js/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/js/bootstrap-fileinput/css/fileinput.css" />
<script src="/js/jquery/jquery-3.3.1.js"></script>
<script src="/js/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-fileinput/js/fileinput.js"></script>
<script src="/js/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="/js/layer/layer.js"></script>
2.HTML
<body>
<div style="width: 900px;height: 500px;margin: auto auto;">
<div class="container-fluid">
<form id="form" action="upload/UpLoadImage" method="post" enctype="multipart/form-data">
<div class="row form-group">
<label class="col-md-4">图片上传:</label>
<div class="col-sm-12">
<input id="input-id" name="file" multiple="multiple" type="file" data-show-caption="true"/>
</div>
</div>
</form>
</div>
</div>
</body>
如果是用thymeleaf模板 有严格的语法检测
multiple = "multiple"
3.js
<script>
$(function () {
initFileInput("input-id");
});
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言