Jquery不使用form表單非同步上傳檔案的方法
阿新 • • 發佈:2018-12-06
現在的專案中需要使用到不重新整理頁面的方式實現上傳檔案,實現方法如下:
html程式碼:
-
檔案:<input id="file" type="file" name="file"/>
-
<button id="upload">上傳檔案</button>
js程式碼:
-
$(function () {
-
$("#upload").click(function(){
-
var formData = new FormData();
-
formData.append('file', $('#file')[0].files[0]);
-
$.ajax({
-
url: "http://127.0.0.1:8081/uploadFile/addUploadFileUrl",
-
type: "POST",
-
data: formData,
-
/**
-
*必須false才會自動加上正確的Content-Type
-
*/
-
contentType: false,
-
/**
-
* 必須false才會避開jQuery對 formdata 的預設處理
-
* XMLHttpRequest會對 formdata 進行正確的處理
-
*/
-
processData: false,
-
success: function (data) {
-
alert("success");
-
},
-
error: function () {
-
alert("上傳失敗!");
-
}
-
});
-
})
-
});
js中有對FormData物件的使用:
1.用一些鍵值對來模擬一系列表單控制元件:即把form中所有表單元素的name和value組裝成一個queryString
2.非同步上傳二進位制檔案