我是在spring boot里面使用的，先看看spring boot的资源结构图
image.png
其中官方文档里面给出了一个例子，我们拿过来使用
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Getting Started</title>
<script type="text/javascript" src="../static/js/plupload.full.min.js"></script>
</head>
<body>
<ul id="filelist"></ul>
<br />
<div id="container">
<a id="browse" href="javascript:;">[Browse...]</a>
<a id="start-upload" href="javascript:;">[Start Upload]</a>
</div>
<br />
<pre id="console"></pre>
<script type="text/javascript">
var uploader = new plupload.Uploader({
browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
url: '/upload' //上传地址
});
uploader.init();
uploader.bind('FilesAdded', function(up, files) {
var html = '';
plupload.each(files, function(file) {
html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
});
document.getElementById('filelist').innerHTML += html;
});
uploader.bind('UploadProgress', function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});
uploader.bind('Error', function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
});
document.getElementById('start-upload').onclick = function() {
uploader.start();
};
</script>
</body>
</html>
因为是在template目录下面，所以加上一个映射controller
@RequestMapping(value = "/plupload",method = RequestMethod.GET)
public String plupload(){
return "plupload";
}
点击上传后的处理逻辑
@RequestMapping(value = "upload",method = RequestMethod.POST)
@ResponseBody
public String upload2(@RequestParam("name") String name,
@RequestParam("file") MultipartFile file) throws IOException {
System.out.println(file.getOriginalFilename());
File file1 = new File("C:\\BaiduNetdiskDownload\\test\\"+file.getOriginalFilename());
file.transferTo(file1);
return name;
}
看看效果
1.打开前端页面
image.png
2.选择上传文件
image.png
3.点击上传即可
image.png
网友评论