1. 准备工作
1.1 前端引入相关插件
index.html
<link href="./bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link href="./css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./css/bootstrap-table.min.css">
<link href="./font-awesome-4.7.0/css/font-awesome.css" media="all"
rel="stylesheet" type="text/css"/>
<link href="./themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/fileinput.min.js" type="text/javascript"></script>
<script src="./themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="./themes/fa/theme.js" type="text/javascript"></script>
<script src="./bootstrap-3.3.7/js/bootstrap.js" type="text/javascript"></script>
<script src="./js/zh.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="./js/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="./js/bootstrap-table-zh-CN.min.js"></script>
<script src="./js/jquery-form.js" type="text/javascript"></script>
1.2 后端服务结构
使用bootstrap做后端的服务
目录结构
2. 文件上传插件
2.1引入文件上传插件
<form id="add_commodity_form" method="post" enctype="multipart/form-data">
<div class="form-group">
<div class="file-loading">
<input id="add_bachPic" type="file" multiple class="file-loading" data-overwrite-initial="false"
data-min-file-count="1">
</div>
</div>
</form>
$("#add_bachPic").fileinput({
language : 'zh',
theme: 'fa',
uploadUrl:"dataGet/upload", // you must set a valid URL here else you will get an error
fileType: "any",
overwriteInitial: false,
showPreview: true, //展前预览
showUpload: true, //不显示上传按钮
showCaption: true, //不显示文字表述
uploadAsync:false, //采用同步上传
removeFromPreviewOnError:true,
showBrowse: false,
browseOnZoneClick: true, //当文件不符合规则，就不显示预览
maxFileCount: 5,
maxFileSize: 1024*10 //单位为kb，如果为0表示不限制文件大小
}).on("filebatchuploadsuccess", function (event, data, previewId, index) {
console.log("filebatchuploadsuccess");
console.log(data);
$('#table-large-columns').bootstrapTable('refresh');
}).on('filebatchuploaderror', function(event, data, msg) {
console.log("filebatchuploaderror");
console.log(data);
$('#table-large-columns').bootstrapTable('refresh'); //会对表格插件刷新处理
});
2.2后端服务处理
@RequestMapping(value = "upload")
@ResponseBody
public ModelMap upload(@RequestParam("file_data") MultipartFile[] files, HttpServletRequest request) {
ModelMap result = new ModelMap();
// 获取路径下的文件
File dfile = new File(filePath);
File[] filess = null;
List<String> fileNameList = new ArrayList<>();
if (dfile.isDirectory()) {
filess = dfile.listFiles();
}
if (filess != null ) {
for (File file1 : filess) {
fileNameList.add(file1.getName());
}
}
for (MultipartFile file : files) {
// 获取文件名,判断是否为空
String fileName = file.getOriginalFilename();
logger.info("上传的文件名为：" + fileName);
if (file.isEmpty()) {
result.put("error", "文件" + fileName + "为空!");
return result;
}
// 判断是否已经存在
if (fileNameList.contains(fileName)) {
result.put("error", "文件" + fileName + "已经存在!");
return result;
} else {
fileNameList.add(fileName);
}
}
for (MultipartFile file : files) {
// 获取文件名
String fileName = file.getOriginalFilename();
File dest = new File(filePath + "\\" + fileName);
// 检测是否存在目录
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
} else {
try {
file.transferTo(dest);
} catch (Exception e) {
e.printStackTrace();
}
}
}
result.put("success", "上传成功!");
return result;
}
3.表格插件使用
3.1 前端页面
<table id="table-large-columns",
data-toggle="table"
data-url="/dataGet/tableData"
data-query-params="queryParams"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="name">文件名</th>
<th data-field="size">大小</th>
<th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
</tr>
</thead>
</table>
function queryParams() {
return {
per_page: 10000,
page: 1
};
}
//操作栏的格式化
function actionFormatter(name, row, index) {
var id = row.name;
var result = "";
console.log("id:" + id + ",row" + row.name + "index:" + index);
result += "<a href='javascript:;' class='btn btn-primary btn-sm' onclick=\"downloadById('" + id + "')\" title='下载'>下载</a>";
result += "<a href='javascript:;' class='btn btn-warning btn-sm' onclick=\"deleteById('" + id + "')\" title='删除'>删除</a>";
return result;
}
function downloadById(id) {
var $eleForm = $("<form method='get'></form>");
$eleForm.attr("action","dataGet/download/"+id);
$(document.body).append($eleForm);
//提交表单，实现下载
$eleForm.submit();
}
function deleteById(id) {
jQuery.ajax({
url: "dataGet/delete",
type: "GET",
data: {id: id},
dataType: "json",
success: function (data, status) {
console.log("data" + data);
console.log("status" + status);
if (data == "success") {
$('#table-large-columns').bootstrapTable('refresh');
alert("delete success!");
} else {
$('#table-large-columns').bootstrapTable('refresh');
alert("delete fail!");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("error");
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
})
}
3.2 后端处理
@RequestMapping(value = "tableData")
@ResponseBody
public JSON GetData(int per_page, int page) {
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//获取文件夹下文件的数目
File file = new File(filePath);
File[] files = null;
if (file.isDirectory()) {
files = file.listFiles();
}
int total = 0;
if (files != null) {
total = files.length;
}
JSONArray jsonArray = new JSONArray();
List<TableData> list = new ArrayList<>();
if(files!=null&&files.length>0) {
for (File f : files) {
TableData tableData = new TableData();
String name = f.getName();
String size = dataGetService.formetFileSize(f.length());
tableData.setName(name);
tableData.setSize(size);
list.add(tableData);
}
}
int end = page * per_page;
if (total < (end)) {
end = total;
}
jsonArray = JSONArray.parseArray(JSON.toJSONString(list.subList((page - 1) * per_page, end)));
return jsonArray;
}