上传
未完成,明天继续
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<button id="upload" class="layui-btn layui-btn-primary layui-border">原始按钮</button>
<script>
layui.use(['layer', 'form','upload'], function () {
var layer = layui.layer, form = layui.form, $ = layui.$ ,upload = layui.upload;
$("#upload").click(function () {
layer.open({
type: 1,
title: false,
area: ['630px', '360px'],
shade: 0.1,
closeBtn: 0,
shadeClose: true,
btn: ['关闭'] ,
content: '<div class="layui-upload-drag" id="test10">\n' +
' <i class="layui-icon"></i>\n' +
' <p>点击上传,或将文件拖拽到此处</p>\n' +
'</div>'
});
//拖拽上传
upload.render({
elem: '#test10',
accept: 'file', //普通文件
exts: 'xls|xlsx', //只允许上传excel文件
url: '/upload' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,done: function(res){
console.log(res)
layer.msg(res);
}
});
})
});
</script>
</body>
</html>
UploadController.java
@Controller
public class UploadController {
@RequestMapping( "toUpload")
public String toUpload(){
return "upload";
}
@PostMapping("/upload")
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败,请选择文件";
}
String fileName = file.getOriginalFilename();
String filePath = "E:\\Git_Study\\test01\\src\\main\\resources\\static\\upload\\";
File dest = new File(filePath + fileName);
try {
file.transferTo(dest);
return "上传成功";
} catch (IOException e) {
e.printStackTrace();
}
return "上传失败!";
}
}