前端代碼：
|
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
