今天从同学那学习到了多文件上传，我迫不及待来完善我的导入文件环节，主要是用了bootsrtap的fileinput 的js包
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="kartik-v-bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="kartik-v-bootstrap-fileinput/js/locales/zh.js"></script>
<link rel="stylesheet" href="kartik-v-bootstrap-fileinput/css/fileinput.css" media="all" type="text/css"/>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="../layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../layuimini/css/public.css" media="all">
<meta charset="UTF-8">
<title>导入文件</title>
</head>
<body>
<div align="center">
<h2>导入文件</h2>
</div>
<div class="file-loading" >
<input type="file" name="upfile" id="upfile" multiple>
</div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
contentType: "application/x-www-form-urlencoded; charset=utf-8"
});
$("#upfile").fileinput({
language: 'zh',
dropZoneEnabled:true,//是否显示拖拽区域
uploadUrl: 'importfilesServlet',
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
}).on("fileuploaded",function (data){
if (data==0)
console.log("ok");
//RetrieveDataTables();
});
});
//RetrieveDataTables();
</script>
</body>
<html>
这个就是上传界面，后台与我之前写的单文件上传基本一致。
后面的步骤是将文件存在服务器文件夹中，然后将文件信息存在数据库中展示出来，然后点击绑定的按钮来创建相关文件的表。
学习时间：17：34到23：41