码迷,mamicode.com
首页 > 编程语言 > 详细

SpringMVC + Ajax文件上传

时间:2020-01-04 18:24:07      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:ping   serve   lte   sda   img   art   val   data   rip   

前端

<%@ 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文件上传

标签:ping   serve   lte   sda   img   art   val   data   rip   

原文地址:https://www.cnblogs.com/zero666/p/12149846.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!