SpringMVC + Ajax文件上传

Richardxx 2020-01-04

前端

<%@ 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>
注意:
14行的 data 别打成 date ;(手贱打错,折腾半天)

后台的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 "接收成功";
    }
}
注意:第6行注解里的 image 必须和 文件控件的name属性保持一致
<input type="file" name="image">
@RequestParam("image")
SpringMVC的配置文件
<!-- 定义文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <property name="defaultEncoding">
      <value>UTF-8</value>
   </property>
   <property name="maxUploadSize">
      <value>32505856</value><!-- 上传文件大小限制为31M,31*1024*1024 -->
   </property>
   <property name="maxInMemorySize">
      <value>4096</value>
   </property>
</bean>

容易出现的错误

1.访问后台成功,回来前端时404或是没有信息返回

原因:Controller没有加@ResponseBody 注解

2.前端提交信息,没有到Controller,前端报错400

Failed to load resource: the server responded with a status of 400 (Bad Request)

就是这个bug,折腾我一下午,痛苦。

原因:参数不匹配

就是前面的两个注意,data别打错,还有文件控件的name属性要和后台Controller 方法的@RequestParam参数一致

SpringMVC + Ajax文件上传

相关推荐

mmywcoco / 0评论 2020-06-06