FormData的主要用途有两个:
- 将form表单元素的 name 与 value 进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
- 异步上传文件
接下来直接上代码吧
//新增数据
function insertInfo() {
//1.创建一个空的FormData对象
var formData = new FormData();
//2.获取所有的值
var file = $('#file')[0].files[0];//获取文件对象,传到后台为二进制文件
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对象的append("name","value")方法添加值
//(第一个参数为name要与后台实体相对应,第二个参数为value值)
//如果file有值(如果没有上传文件,前端接受为undefined,到后台会报错)
if (file) {
formData.append('file', file); //添加图片信息的参数
}
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不要去处理发送的数据
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
async: false,//同步发送请求
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);
}
});
}