FormData對象,是可以使用一系列的鍵值對來模擬一個完整的表單,然後使用XMLHttpRequest發送這個"表單"。
在 Mozilla Developer 網站 使用FormData對象 有詳盡的FormData對象使用說明。
但上傳文件部分只有底層的XMLHttpRequest對象發送上傳請求,那麼怎麼通過jQuery的Ajax上傳呢?本文將介紹通過jQuery使用FormData對象上傳文件。
HTML代碼
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對象,不需要對數據做處理。標籤添加enctype="multipart/form-data"屬性。cache設置為false,上傳文件不需要緩存。contentType設置為false。因為是由表單構造的FormData對象,且已經聲明瞭屬性enctype="multipart/form-data",所以這裡設置為false。
上傳後,服務器端代碼需要使用從查詢參數名為file獲取文件輸入流對象,因為中聲明的是name="file"。
如果不是用
表單構造FormData對象又該怎麼做呢?
使用FormData對象添加字段方式上傳文件
HTML代碼
這裡沒有
標籤,也沒有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) {});
這裡有幾處不一樣:
從代碼$('#file')[0].files[0]中可以看到一個標籤能夠上傳多個文件,只需要在裡添加multiple或multiple="multiple"屬性。