关于Ajax同时传递表单文本数据和文件数据
html
<form id="form1" enctype="multipart/form-data">
<div class="form-group">
<label for="description"></label>
<textarea class="form-control" id="description" cols="30" rows="10" placeholder="内容不能为空"></textarea>
</div>
<div class="form-group">
<label for="picture"></label>
<input type="file" class="form-control" id="picture" placeholder="添加图片">
</div>
<div class="form-group">
<label for="tag">内容标题(简明扼要)</label>
<input type="text" class="form-control" id="tag" placeholder="添加标签">
</div>
<button type="button" onclick="publish()" class="btn btn-success">确认发布</button>
</form>
Ajax
流程:
使用FormData依次获得表单元素,然后使用.append()方法以键值对的方式加入FormData,最后传FormData.
{
alert("66666");
var formData=new FormData;
// // var file = $("#picture").valueOf();//这种方式对文件元素不行
var file = $("#picture")[0].files[0];//用这种方式
var description = $("#description").val();
var tag=$("#tag").val();
console.log(file);
formData.append("description",description);
formData.append("tag",tag);
formData.append("multipartFile",file);
// Ajax 异步提交文件
$.ajax({
type: "post",
url: "/publish",
data:formData ,//上一步的FormData
cache: false,//不缓存数据
processData: false,//不转换数据
contentType: false,
dataType: "json",
success: function (data) {
alert("666")
if (data.code == 200) {
// 页面的刷新
setInterval(function () {
location.replace(location.href);
}, 1500);
}
}
}
)
}
/
后台:
@RequestMapping("/publish")
@ResponseBody
public ResultData Publish(Moment moment, MultipartFile multipartFile)
{
System.out.println("c层进去");
System.out.println(moment.toString());
System.out.println(multipartFile.getOriginalFilename());
// User user=(User) request.getSession().getAttribute("user");
// moment.setUser_id((user.getUser_id()));
moment.setUser_id(1);
return momentService.publish(moment,multipartFile);
}
注意事项:
把数据加入FormData时,确保 键(key)名要和后台参数名字一样,不然传递不了。