今天进行了layui文件上传，也是我的大作业的第一阶段；
要求：多个文件导入，生成数据字典csv exl自动提表头 两列英文字段按英文名称排序 数据导入 公式编辑表间关联关系主界面
今天处理的是多个文件的导入：网上查找的layui的代码
首先是html界面，
<div class="layui-body" >
<div class="UpFileDivd" align="center">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max- 196px">
</div>
</div>
</br></br>
<button id="UpBtn" class="layui-btn" >上传</button>
</div>
<div class="UpTable">
<div class="layui-upload-list" style="max- 1000px;">
<table class="layui-table">
<colgroup>
<col width="400">
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
</div>
然后是script部分
<script>
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
upload.render({
elem: '#test10'
,elemList: $('#demoList')
,accept: 'file'
,auto: false
,bindAction:'#UpBtn'
,url: 'servlet?method=tecon' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,done: function(res){
},choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var strlist=file.name.split('.')
if(strlist[strlist.length-1]!="xlsx"&&strlist[strlist.length-1]!="csv"){
layer.alert('上传文件错误，上传xlsx或csv', function(index){
//do something
layer.close(index);
});
delete files[index];
}
else {
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
}
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
});
</script>
效果：
然后是Java代码部分：
public void tecon( HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException, SQLException, InterruptedException {
if (!ServletFileUpload.isMultipartContent(request)) {
// 如果不是则停止
PrintWriter writer = response.getWriter();
writer.println("Error: 表单必须包含 enctype=multipart/form-data");
writer.flush();
return;
}
String fileName="";
String filePath="";
// 配置上传参数
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
factory.setSizeThreshold(MEMORY_THRESHOLD);
// 设置临时存储目录
factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置最大文件上传值
upload.setFileSizeMax(MAX_FILE_SIZE);
// 设置最大请求值 (包含文件和表单数据)
upload.setSizeMax(MAX_REQUEST_SIZE);
// 中文处理
upload.setHeaderEncoding("UTF-8");
// 构造临时路径来存储上传的文件
// 这个路径相对当前应用的目录
String uploadPath = request.getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;
// 如果目录不存在则创建
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
try {
// 解析请求的内容提取文件数据
@SuppressWarnings("unchecked")
List<FileItem> formItems = upload.parseRequest(request);
if (formItems != null && formItems.size() > 0) {
// 迭代表单数据
for (FileItem item : formItems) {
// 处理不在表单中的字段
if (!item.isFormField()) {
fileName= new File(item.getName()).getName();
filePath = uploadPath + File.separator + fileName;
File storeFile = new File(filePath);
// 在控制台输出文件的上传路径
System.out.println(filePath);
// 保存文件到硬盘
item.write(storeFile);
request.setAttribute("message",
"文件上传成功!");
}
}
}
} catch (Exception ex) {
request.setAttribute("message",
"错误信息: " + ex.getMessage());
}
HttpSession session = request.getSession();
String id=(String) session.getAttribute("id");
char[] nameArr=fileName.toCharArray();
String filename="";
for (int i = 0; i < nameArr.length; i++) {
if(nameArr[i]!='('&&nameArr[i]!=')'&&nameArr[i]!='-'&&nameArr[i]!='、')filename=filename+nameArr[i];
}
String[] spstr=filename.split("\\.");
StringBuffer strbuff = new StringBuffer();
System.out.println(spstr.length);
for (int i = 0; i < spstr.length-1; i++) {
strbuff.append(spstr[i]);
}
String TableName=strbuff.toString();
dao.CreataTab(TableName);
ReadExcel r=new ReadExcel();
List<List<Object>> rowlist=r.ExcelToRowList(filePath);
dao.FirInputData(rowlist,TableName);
dao.FirInsertToHis(TableName,id);
JSONObject ob=new JSONObject();
ob.put("code", 0);
ob.put("msg", "");
ob.put("count",1);
ob.put("data","'filename':'AAA'");
PrintWriter out = response.getWriter();
out.write(ob.toString());
}
这样就可以做到多个文件的导入了。