Ajax使用formData提交带图片上传的表单
记录一下今天踩过的坑。。这么个问题居然搞了快两个小时了。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 和 控制台输出。总是能解决的。
本来这会已经躺床上了....
NYN
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-09-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
