版权声明：如需转载，请备注链接： https://blog.csdn.net/W_Meng_H/article/details/83149018
工具：bootstrap-fileinput 、bootstrap-table 、模态框
一、配置bootstrap-fileinput
1、下载插件，导入项目中：
2、html页面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--
Title:上传
Description：上传
Author：MengMeng
Created date: 2018/10/6
Version: Html5
-->
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>文件管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="keyword1,keyword2,keyword3"></meta>
<meta name="description" content="this is my page"></meta>
<!-- 引入css -->
<span th:replace="pageFrame/basicsCss :: copy" />
<!-- bootstrap-fileinput -->
<link rel="stylesheet" th:href="@{/plugins/bootstrap-fileinput/css/fileinput.min.css}" type="text/css"/>
</head>
<body class="hold-transition skin-dark fixed sidebar-mini sidebar-collapse">
<div class="wrapper">
<div class="content-wrapper">
<!-- 内容主体 -->
<section class="container content">
<input id="Message" name="Message" th:value="${Message}" class="hidden" readonly="readonly"></input>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<label class="col-md-4">文件管理:</label>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn" data-toggle="modal"
data-target="#uploadFile">上传文件</button>
<button class="btn btn-primary btn" data-toggle="modal"
data-target="#seeFile" onclick="showList()">查看文件</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="uploadFile" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog " style="width:900px" >
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">上传文件</h4>
</div>
<div class="modal-body">
<input id="input-id" name="file" multiple="multiple" type="file" data-show-caption="true" />
</div>
<div class="modal-footer">
<canvas id="canvas" height="25"></canvas>
<!-- <button type="button" class="btn btn-default"
data-dismiss="modal">关闭</button> -->
<!-- <button type="button" class="btn btn-primary">提交更改</button> -->
</div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="seeFile" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:900px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" >查看文件</h4>
</div>
<div class="modal-body">
<!-- table -->
<div class="table table-responsive">
<table id="file_table" data-locale="zh-CN"
data-classes="table table-hover table-condensed"
data-toggle="table"
data-url="/download/file"
data-pagination="true"
data-side-pagination="server"
data-page-list="[10, 20, 30, 50, 100]"
data-search="false"
data-show-columns="false"
data-show-toggle="false"
data-toolbar="#toolbar"
data-show-export="false"
data-show-refresh="true"
data-export-types="['excel', 'txt']">
<thead>
<tr>
<th data-field="filename" data-align="center" data-sortable="true">文件名称</th>
<th data-field="download" data-align="center" data-sortable="false">下载</th>
<th data-field="delete" data-align="center" data-sortable="false">删除</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!-- <button type="button" class="btn btn-primary">提交更改</button> -->
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
</section>
</div>
<div class="control-sidebar-bg"></div>
</div>
<!-- 引入js【body末尾引入js文件会使页面加载更快】 -->
<span th:replace="pageFrame/basicsJs :: copy" />
<script th:src="@{/plugins/bootstrapValidator/js/bootstrapValidator.min.js}"></script>
<script th:src="@{/plugins/bootstrapValidator/js/language/zh_CN.js}"></script>
<script th:src="@{/plugins/select2/js/select2.full.min.js}"></script>
<!-- bootstrap-fileinput -->
<script th:src="@{/plugins/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/plugins/bootstrap-fileinput/themes/fa/theme.min.js}"></script>
<script th:src="@{/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>
<script th:src="@{/js/milestoneFile.js}"></script>
<script>
function showList(){
$("#file_table").bootstrapTable('refresh');
}
$(function(){
// dom加载完毕
var $m_btn = $('#modalBtn');
var $modal = $('#uploadFile');
$m_btn.on('click', function(){
$modal.modal({backdrop: 'static'});
});
// 测试 bootstrap 居中
$modal.on('show.bs.modal', function(){
var $this = $(this);
var $modal_dialog = $this.find('.modal-dialog');
// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
$this.css('display', 'block');
$modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
});
});
</script>
</body>
</html>
3、初始化 bootstrap-fileinput
$(function() {
initFileInput("input-id");
initFileInput("input-file");
});
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control
.fileinput({
language : 'zh', //设置语言
uploadUrl : "upload/file", //上传的地址
allowedFileExtensions : [ 'xls', 'xlsx', 'doc', 'docx', 'txt', 'pdf', 'pptx', 'ppt' ],//接收的文件后缀
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync : true, //默认异步上传
showUpload : true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption : false,//是否显示标题
showClose:false,
browseClass : "btn btn-primary", //按钮样式
maxFileCount : 5, //允许同时上传的最大文件个数
enctype : 'multipart/form-data',
validateInitialCount : true,
msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
maxFileCount:10, //表示允许同时上传的最大文件个数
maxFileSize:51200, //单位为kb，如果为0表示不限制文件大小
})
.on('filepreupload', function(event, data, previewId, index) { //上传中
console.log('文件正在上传');
})
.on("fileuploaded",function(event, data, previewId, index) { //一个文件上传成功
var response = data.response;
console.log(response.message);//打印出返回的json
console.log(response.status);//打印出错误状态
if(response.message){
layer.msg("上传成功",
/*{
time: 500, //1.5s后自动关闭
},*/
function () {
});
}
}).on('fileerror', function(event, data, msg) { //一个文件上传失败
console.log('文件上传失败！' + data.status);
if(data.message){
layer.msg("上传失败",
{
time: 500, //1.5s后自动关闭
},
function () {
});
}
})
}
//下载文件
function downFile(id, type) {
var r = confirm("确定下载该文件?");
if (r == true) {
window.location.href="/download/" + type + "/" + id;
} else {
layer.msg('操作取消', {
time : 500,
})
}
};
//删除文件
function removeThisObject(id, type) {
var r = confirm("确定删除该文件?");
if (r == true) {
$.get("/download/" + type + "/remove/" + id, {}, function(data,
status) {
if (status) {
if (data) {
layer.msg('删除成功', {
time : 500,
}, function() {
$('[name="refresh"]').click()
})
} else {
layer.msg('您没有此权限', function() {
})
}
} else {
layer.msg('操作失败', function() {
})
}
})
} else {
layer.msg('操作取消', {
time : 500,
})
}
};
页面效果：
二、bootstrap modal垂直居中
<script>
$(function(){
// dom加载完毕
var $m_btn = $('#modalBtn');
var $modal = $('#uploadFile');
$m_btn.on('click', function(){
$modal.modal({backdrop: 'static'});
});
// 测试 bootstrap 居中
$modal.on('show.bs.modal', function(){
var $this = $(this);
var $modal_dialog = $this.find('.modal-dialog');
// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
$this.css('display', 'block');
$modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
});
});
</script>三、bootstrap table刷新
<script>
function showList(){
$("#file_table").bootstrapTable('refresh');
}
</script>相关学习链接：