<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>ajax使用FormData提交带文件表单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<h1>ajax使用FormData提交带文件表单</h1>
<script type="text/javascript">
$(function(){
$("#formdataId").click(function(){
var form=document.querySelector("#form1");
var form3 = document.getElementById("form1");
var formData = new FormData(form3);
alert(formData.get("name")+"=="+formData.get("passwd")+"=="+formData.get("file"));
$.ajax({
url : '/ajax_upload_1',
type : 'post',
data : formData,
processData : false, //告诉jQuery不要去处理发送的数据
contentType: false,//告诉jQuery不要去设置Content-Type请求头
success : function(responseStr) {
alert("response：" + responseStr);
},
error : function(responseStr) {
alert("失败:" + JSON.stringify(responseStr));//将 json对象 转成 json字符串。
}
});
})
});
</script>
<form action="" id="form1" enctype="multipart/form-data">
<input type="text" name="name" value="allen"/>
<input type="text" name="passwd" value="123456"/>
<input type="file" name="file" id="upload"/>
<input type="button" value="ajax提交表单" id="formdataId"/>
</form>
<em id="zs_currvip"></em>
</body>
</html>
note：
1.var form=document.querySelector("#form1");
或var form3 = document.getElementById("form1"); 拿到表单里的数据值，通过new FormData(form3)封装到formData对象中
2.切记使用FormData时，ajax里的Type一定要是POST，GET不支持，如果使用GET，后台获取不到参数
3.除了使用new FormData($("#form1"));可以添加值，还可以使用
var formData = new FormData();
formData.append("name","allen");
formData.append("passwd",123456);
自定义参数
4.一定要设置下面的参数，否则Jquery会自动处理
processData : false, //告诉jQuery不要去处理发送的数据
contentType 默认值为 application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。
contentType = false，是防止jQuery对其进行处理,formData 会自动把类型填充为multipart/form-data
@PostMapping("/ajax_upload_1")
@ResponseBody
public String ajaxUpload1(String name, String passwd, MultipartFile file){
return "name={" + name + "}, passwd={"+passwd+"}," + file.getOriginalFilename();
}