通過jQuery Ajax使用FormData物件上傳檔案
阿新 • • 發佈:2019-01-22
FormData
物件,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest
傳送這個"表單"。
在 Mozilla Developer 網站 使用FormData物件 有詳盡的FormData
物件使用說明。
但上傳檔案部分只有底層的XMLHttpRequest
物件傳送上傳請求,那麼怎麼通過jQuery
的Ajax
上傳呢?
本文將介紹通過jQuery
使用FormData
物件上傳檔案。
使用<form>
表單初始化FormData
物件方式上傳檔案
HTML程式碼
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
javascript程式碼
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function (res) {
}).fail(function(res) {});
這裡要注意幾點:
processData
設定為false
。因為data
值是FormData
物件,不需要對資料做處理。<form>
標籤新增enctype="multipart/form-data"
屬性。cache
設定為false
,上傳檔案不需要快取。contentType
設定為false
。因為是由<form>
表單構造的FormData
物件,且已經聲明瞭屬性enctype="multipart/form-data"
,所以這裡設定為false。
上傳後,伺服器端程式碼需要使用從查詢引數名為file
獲取檔案輸入流物件,因為<input>
name="file"
。如果不是用<form>
表單構造FormData
物件又該怎麼做呢?
使用FormData
物件新增欄位方式上傳檔案
HTML程式碼
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
這裡沒有<form>
標籤,也沒有enctype="multipart/form-data"
屬性。
javascript程式碼
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這裡有幾處不一樣:
append()
的第二個引數應是檔案物件,即$('#file')[0].files[0]
。contentType
也要設定為‘false’。
從程式碼$('#file')[0].files[0]
中可以看到一個<input type="file">
標籤能夠上傳多個檔案,
只需要在<input type="file">
裡新增multiple
或multiple="multiple"
屬性。