layui上传控件upload前后端代码(java)分享

分享 未结
1 325
yaop
yaop 2017-12-22
悬赏:20飞吻
最近开发用到上传控件,我把前后端代码分享下;

前端代码没啥说的,都是layui的upload控件,这里选用的是多文件上传后返回列表那个;
jsp的代码:
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal"
id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
</div>
</div>
js代码:
// 执行实例
var demoListView = $('#demoList');
var uploadListIns = upload.render({
elem: '#testList', // 绑定元素
url: ctx + '/upload', // 上传接口
accept: 'file',//指定允许上传的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
multiple: true,//是否允许多文件上传。设置 true即可开启。不支持ie8/9
auto: false,//是否选完文件后自动上传。如果设定 false,那么需要设置 bindAction 参数来指向一个其它按钮提交上传
bindAction: '#testListAction',//指向一个按钮触发上传,一般配合 auto: false 来使用。
choose: function(obj){ //选择文件后的回调函数。
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
// 读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">',
'<td>'+ file.name +'</td>',
'<td>'+ (file.size/1014).toFixed(1) +'kb</td>',
'<td>等待上传</td>',
'<td>',
'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>',
'<button class="layui-btn layui-btn-mini 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值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
},
allDone: function(obj){ //当文件全部被提交后,才触发
// 此处要是能整体上传成功后返回路经集合就最好了
console.log(obj.total); //得到总文件数
console.log(obj.successful); //请求成功的文件数
console.log(obj.aborted); //请求失败的文件数
},
done: function(res, index, upload){
if(res.code == 0){ // 上传成功
var tr = demoListView.find('tr#upload-'+ index);
var tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); // 清空操作
// res.data.src 返回上传文件的路径,此处要处理自己的业务逻辑
return delete this.files[index]; // 删除文件队列已经上传成功的文件
}
this.error(index, upload);
},
error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index);
var tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); // 显示重传
}
});
后台java代码:
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String ,Object> uploadFile(HttpServletRequest request,
HttpServletResponse response) throws IOException {

Map<String, Object> result = new HashMap<String, Object>();
Map<String, Object> resultSrc = new HashMap<String, Object>();


MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
PrintWriter out = response.getWriter();
String projectName = request.getContextPath();
String outStr = "";
// 文件保存目录路径
String savePath = request.getSession().getServletContext()
.getRealPath("/uploadFiles/photo/");
response.setContentType("text/html; charset=UTF-8");
// 检查目录
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory()) {
// 如果不存在,创建文件夹
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String ymd = sdf.format(new Date());
savePath += "/" + ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
// 此处是直接采用Spring的上传
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
MultipartFile mf = entity.getValue();
String fileFullname = mf.getOriginalFilename();
fileFullname = fileFullname.replace('&', 'a');
fileFullname = fileFullname.replace(',', 'b');
fileFullname = fileFullname.replace(',', 'c');
// 扩展名
String fileExt = fileFullname.substring(fileFullname.lastIndexOf(".") + 1).toLowerCase();

SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;

File uploadFile = new File(savePath + newFileName);
try {
FileCopyUtils.copy(mf.getBytes(), uploadFile);
outStr += projectName + "/uploadFiles/photo/" + ymd + "/"+ newFileName +";";
} catch (IOException e) {
result.put("code", 200);
result.put("msg", "上传失败");
e.printStackTrace();
}
}
result.put("code", 0);
result.put("msg", "上传成功");
resultSrc. put("src", outStr);
result.put("data", resultSrc);
return result;
// 上传结束
}
需要upload说明的去看贤心的文档;
没有过多的说明,简单粗暴,亲测好用,希望给大家帮助!
回帖
本帖已设置禁止回复
本周热议
没有相关数据
layui

微信扫码关注 layui 公众号