前端代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<form id= "uploadForm" >
<p >指定文件名: <input type= "text" name= "filename" value= "" /></p >
<p >上传文件: <input type= "file" name= "file" /></ p>
<input type= "button" value= "上传" onclick= "doUpload()" />
</form>
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: 'http://localhost:8080/xiaochangwei/file/upload' ,
type: 'POST' ,
data: formData,
async: false ,
cache: false ,
contentType: false ,
processData: false ,
success: function (returndata) {
alert(returndata);
},
error: function (returndata) {
alert(returndata);
}
});
}
|
后端:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@RequestMapping (value = "/upload" , method = RequestMethod.POST)
public String upload(HttpServletRequest request, @RequestParam ( "file" ) MultipartFile file, ModelMap model) {
System.out.println( "开始" );
String path = request.getSession().getServletContext().getRealPath( "upload" );
String fileName = file.getOriginalFilename();
// String fileName = new Date().getTime()+".jpg";
System.out.println(path);
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
// 保存
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
model.addAttribute( "fileUrl" , request.getContextPath() + "/upload/" + fileName);
return "result" ;
}
|
如果前端有很多实体类数据同文件一同提交
可以修改后端方法为:
复制代码 代码如下:
upload(HttpServletRequest request, @RequestParam("file") MultipartFile file, ModelMap model,User user)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<script type= "text/javascript" >
function UpladFile() {
var fileObj = document.getElementById( "file" ).files[0]; // js 获取文件对象
var FileController = "http://localhost:8080/xiaochangwei/file/upload" ; // 接收上传文件的后台地址
// FormData 对象
var form = new FormData($( "#uploadForm" )[0]);
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open( "post" , FileController, true );
xhr.onload = function () {
// alert("上传完成!");
};
xhr.upload.addEventListener( "progress" , progressFunction, false );
xhr.send(form);
}
function progressFunction(evt) {
var progressBar = document.getElementById( "progressBar" );
var percentageDiv = document.getElementById( "percentage" );
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%" ;
if (evt.loaded==evt.total){
alert( "上传完成100%" );
}
}
}
</script>
<progress id= "progressBar" value= "0" max= "100" ></progress>
<form id= "uploadForm" >
<input type= "file" id= "file" name= "myfile" />
<input type= "button" onclick= "UpladFile()" value= "上传" />
</form>
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/xiaochangwei/p/5239104.html