使用FormData向后台发送文件及数据

FormData的主要用途有两个：

1. 将form表单元素的 name 与 value 进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2. 异步上传文件

---

接下来直接上代码吧

//新增数据
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);
		}
	});
}