front end
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax文件上传练习</title> <script type="text/JavaScript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> </head> <script type="text/javascript"> $(function () { $("input[type='button']").click(function () { var formData = new FormData($("#upForm")[0]); $.ajax({ type: "post", url: "${pageContext.request.contextPath}/upfile/upload", data: formData, cache: false, processData: false, contentType: false, success: function (data) { alert(data); }, error: function (response) { console.log(response); alert("上传失败"); } }); }); }); </script> <body> <form id="upForm" method="post" enctype="multipart/form-data"> 用户名:<input type="text" name="userName" id="userName" /><br/> 密码:<input type="password" name="pwd" id="pwd" /><br/> <input type="file" name="image"><br/> <input type="button" value="提交" /> </form> </body> </html>
Note:
Data line 14 are respectively labeled DATE; (cheap wrong hands, toss half)
background Controller
@Controller @RequestMapping("/upfile") public class UpFileController { @RequestMapping("/upload") @ResponseBody public String getMsg(UserTest user,@RequestParam("image") CommonsMultipartFile file){ System.out.println(user.getUserName()); System.out.println(file.getOriginalFilename()); return "接收成功"; } }
Note: name attribute line 6 notes in the image file and controls must be consistent
<the INPUT of the type = "File" name = " image ">
@RequestParam ( " image ")
SpringMVC profile
<! - defined file upload parser -> < bean the above mentioned id = "the MultipartResolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver" > < Property name = "defaultEncoding" > < value > UTF-8 < / value > </ Property > < Property name = "maxUploadSize" > < value > 32,505,856 </ value > <-! upload file size limit of 31M, 31 * 1024 * 1024 -> </property> <property name="maxInMemorySize"> <value>4096</value> </property> </bean>
Error prone
1. Access backstage success, back when the front end 404 or no information is returned
The reason: Controller did not add @ResponseBody comment
2. The front-end submission of information, not to the Controller, front-end error 400
Failed to load resource: the server responded with a status of 400 (Bad Request)
Is this bug, toss me one afternoon and pain.
Reason: The parameter does not match
Note that the previous two, data do wrong, there is consistent @RequestParam parameter name attribute file for the control method of the background to and Controller