使⽤layui进⾏⽂件上传
今天进⾏了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="上传成功后渲染" >
</div>
</div>
</br></br>
<button id="UpBtn" class="layui-btn" >上传</button>
</div>
<div class="UpTable">
<div class="layui-upload-list" >
<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>
markdown格式是什么</table>
</div>
</div>
</div>
然后是script部分
<script>
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
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(); //将每次选择的⽂件追加到⽂件队列
//读取本地⽂件
jquery下载文件请求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(){
sql2008中文数据库下载obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的⽂件
<()[0].value = ''; //清空 input file 值，以免删除后出现同名⽂件不可选
});
that.elemList.append(tr);
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//de == 0){ //上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除⽂件队列已经上传成功的⽂件
return;
//}
<(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 = Writer();
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 Property("pdir")));
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置最⼤⽂件上传值
upload.setFileSizeMax(MAX_FILE_SIZE);
计算机源程序是指什么// 设置最⼤请求值 (包含⽂件和表单数据)
upload.setSizeMax(MAX_REQUEST_SIZE);
/
/ 中⽂处理
upload.setHeaderEncoding("UTF-8");
// 构造临时路径来存储上传的⽂件
// 这个路径相对当前应⽤的⽬录
String uploadPath = ServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;
// 如果⽬录不存在则创建
File uploadDir = new File(uploadPath);
if (!ists()) {
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 Name()).getName();
filePath = uploadPath + File.separator + fileName;
File storeFile = new File(filePath);
/
/ 在控制台输出⽂件的上传路径
System.out.println(filePath);
// 保存⽂件到硬盘
item.write(storeFile);
request.setAttribute("message",
"⽂件上传成功!");
}
}
}kotlin operator
} catch (Exception ex) {
request.setAttribute("message",
"错误信息: " + ex.getMessage());
}
HttpSession session = Session();
String id=(String) Attribute("id");
char[] CharArray();
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 String();
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 = Writer();
out.String());
}
这样就可以做到多个⽂件的导⼊了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论