SpringMVC + Ajax file upload

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

SpringMVC + Ajax file upload

Guess you like