FormData的主要用途有兩個(gè)：
- 將form表單元素的 name 與 value 進(jìn)行組合揉忘，實(shí)現(xiàn)表單數(shù)據(jù)的序列化跳座，從而減少表單元素的拼接端铛，提高工作效率。
- 異步上傳文件
接下來直接上代碼吧
//新增數(shù)據(jù)
function insertInfo() {
//1.創(chuàng)建一個(gè)空的FormData對(duì)象
var formData = new FormData();
//2.獲取所有的值
var file = $('#file')[0].files[0];//獲取文件對(duì)象疲眷，傳到后臺(tái)為二進(jìn)制文件
var storeName = $("#storeName").val();
var categoryId = $("#categoryId").val();
var bindPhone = $("#bindPhone ").val();
var areaId = $("#areaId ").val();
var address = $("#insertAddress").val();
var brief = $("#brief").val();
//3.利用FormData對(duì)象的append("name","value")方法添加值
//（第一個(gè)參數(shù)為name要與后臺(tái)實(shí)體相對(duì)應(yīng),第二個(gè)參數(shù)為value值）
//如果file有值（如果沒有上傳文件禾蚕，前端接受為undefined，到后臺(tái)會(huì)報(bào)錯(cuò)）
if (file) {
formData.append('file', file); //添加圖片信息的參數(shù)
}
formData.append('storeName', storeName);
formData.append('categoryId', categoryId);
formData.append('bindPhone', bindPhone);
formData.append('areaId', areaId);
formData.append('address', address);
formData.append('brief', brief);
$.ajax({
type: "post",
url: "${base}/xunFeng/updateInfo",
data: formData,
dataType: 'json',
cache: false,//上傳文件不需要緩存
processData: false,// 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
contentType: false,// 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭
async: false,//同步發(fā)送請(qǐng)求
success: function(dataString) {
console.log("添加完成" + dataString);
// dataString=JSON.parse(dataString);
if (dataString.errorcode == "1000") {
//清空表單
$("#insertFormInfo")[0].reset();
} else {
layer.alert(dataString.errormsg);
}
},
error: function(xhr, errorType, error) {
layer.alert('加載失斂袼俊：' + error);
}
});
}
