1. 程式人生 > 實用技巧 >使用FormData向後臺傳送檔案及資料

使用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);
		}
	});
}