Ajax使用formData提交带图片上传的表单

版权声明：我的个人博客：http://www.zjhuiwan.cn。 https://blog.csdn.net/sunon_/article/details/84379287

记录一下今天踩过的坑。。这么个问题居然搞了快两个小时了。ssm框架，前台form带图片上传，因为效验表单数据，所以不能直接submit。

formDat还是很简单的，有很多加值得方法，后台可以直接用对象接收。

使用ajax提交有很多种方式，说一下使用formDat，直接贴代码。

前端一个form表单，带图片

其实很简单，只需注意几个点。

1、用formData格式传输参数Controller的参数名也要和form表单name对应

2、因为我之前是用var file = $('#file').val();得到的file，后台用MultipartFile file一直接收不到（就是这地方搞了好久）

后来慢慢调错，发现Controller里用String file 就能收的到，就觉得肯定是前台传过来的不对，然后前台alert(file)发现是图片路径，不是Object对象，是一个字符串

实在没想到。。。改成这样就好了。

直接new formData(“form...”) 好像也是传的string类型图片。

省略了很多.....这编辑器不好写代码，复制过来又会乱。。等改善吧

反正遇到问题一步一步来，脑子蒙圈实在不知道哪有问题，看代码好像哪也没有问题...这时候就要不断调式缩小范围，然后排除一些不可能有问题的地方，针对一些可能会有问题或者不确定有没有问题的地方不断测试，利用debug 和 控制台输出。总是能解决的。

<form id="form1"  enctype="multipart/form-data">
            <label class="aui-label-control"> 昵称 </label>
                    <input type="text"  name="userName" id="1" >
            <label class="aui-label-control"> 手机号码 </label>
                    <input type="text"  name="phone" id="2" "/>
            <label class="aui-label-control"> 所在城市 </label>
                    <input type="text"  name="city" id="3"  />
            <label class="aui-label-control"> 更换头像  </label>
                    <input type="file" name="file" id="file" multiple />
                <a onclick="severCheck()" >确认修改</a>
 </form>

js代码：ajax提交

function severCheck() {
            var formData = new FormData();
            var userName = $("#1").val();
            var file = $("#file")[0].files[0];
            var phone = $("#2").val();
            var userId = $("#userId").val();
            var city = $("#3").val();
            var reg = /^1[34578]\d{9}$/;
            var bool = false;
            if (userName.length < 1 || userName.length > 12) {
               ...
            } else {
                ...
            }

            if (phone != "" && !(reg.test(phone))) {
                ...
                return false;
            }
            if ( city != "" && city.length > 10) {
                ...
                    return false;
            }

            if (bool) {
                return false;
            }

            if (file != "") {
                formData.append("file", file);
            }
            formData.append("city",  city);
            formData.append("userName", userName);
            formData.append("userId", userId);
            formData.append("phone", phone);
            $.ajax({
                type : "POST",
                url : "<%=path%>/editUserInfo",
                data : formData,
                cache : false,
                processData : false,
                contentType : false,
                success : function(data) {
                    window.location.reload();
                    if ("success" == data.msg) {
                       ...
                        window.location.href = "<%=path%>/index";
                    } else if ("error" == data.msg) {
                       ....
                    }
                },
              error:function(data){
                    window.location.reload();
                    if ("success" == data.msg) {
                       ...
                        window.location.href = "<%=path%>/index";
                    } else if ("error" == data.msg) {
                        ....
                    }
              }
            });
        }

后端代码：springmvc接收后端代码

 @RequestMapping("/editUserInfo")
    @ResponseBody
    public JSONObject EditUserInfo(HttpSession session, HttpServletRequest request,
        @RequestParam(value = "file", required = false) MultipartFile file,
        UserInfo userInfo) {
        JSONObject json = new JSONObject();

        // 图片上传
        // 如果文件不为空，写入上传路径
        if (Tools.isNotEmpty(file)) {
            // 循环获取file数组中得文件
            // 上传文件
            String fileName = Tools.saveFile(file, request);
            //图片路径保存到数据库
            userInfo.setHeadUrl(fileName);
        }
        userInfo.setUpdatetime(new Date());
        int result = userInfoService.editUserInfo(userInfo);
        if (result == 1) {
            // session.removeAttribute("pagenum");
            json.put("msg", "success");
        } else {
            json.put("msg", "error");
        }
        return json;
    }

 var file = $("#file")[0].files[0];

• 其实很简单，只需注意几个点。

  1、用formData格式传输参数Controller的参数名也要和form表单name对应

  2、因为我之前是用var file = $('#file').val();得到的file，后台用MultipartFile file一直接收不到（就是这地方搞了好久）

  后来慢慢调错，发现Controller里用String file 就能收的到，就觉得肯定是前台传过来的不对，然后前台alert(file)发现是图片路径，不是Object对象，是一个字符串

  实在没想到。。。改成这样就好了。

  直接new formData(“form...”) 好像也是传的string类型图片。

  省略了很多.....这编辑器不好写代码，复制过来又会乱。。等改善吧

  反正遇到问题一步一步来，脑子蒙圈实在不知道哪有问题，看代码好像哪也没有问题...这时候就要不断调式缩小范围，然后排除一些不可能有问题的地方，针对一些可能会有问题或者不确定有没有问题的地方不断测试，利用debug 和 控制台输出。总是能解决的。