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

原文链接  https://www.zjhuiwan.cn/info/20180920/1809201054000240000.html

 

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

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

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

前端一个form表单，带图片

<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;
    }

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

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

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

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

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

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

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

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

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