使用FormData向後臺傳送檔案及資料
阿新 • • 發佈:2021-01-20
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); } }); }