通過Ajax使用FormData物件無重新整理上傳檔案
寫在前面:本文說的這個方案有瀏覽器相容性問題;所有主流瀏覽器的較新版本已經支援這個物件了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,對相容性比較敏感的網站慎用。
在工作中遇到了一個問題:在一個頁面中,有4塊內容,每塊內容都包含一個圖片上傳功能,希望可以實現一鍵把這四塊內容都上傳上去。
我沒有用外掛實現上傳功能,就是用的input[type=file],因此就遇到一個問題就是:
①傳統的form表單會導致頁面重新整理,無法實現上述功能
②把表單serialize()序列化用Ajax的方式提交,也無法把上傳檔案的檔案流進行序列化,也不行
我現有的知識就搞不定了,只能求助網上的大神了,百度了一下,大概看了兩個方案:
①在js中建立一個新form表單,把頁面中原form表單copy一份,然後再用js搞一個iframe,把form表單的target設定為iframe,這樣提交後返回的內容就在iframe裡,最後再把form表單、iframe移除
②就是本文下面要說的使用FormData物件實現
有其他思路方案的希望不吝賜教!
好,介紹完背景之後,開始介紹我們今天的主題:FormData物件。
有兩種方式可以建立一個FormData物件:
①建立一個空的FormData物件,然後使用append()方法向該物件裡新增欄位
②使用HTML表單來初始化一個FormData物件
下面分別介紹一下:
第一種方式:
var oMyForm = new FormData(); oMyForm.append("username", "Groucho"); oMyForm.append("accountnum", 123456); oMyForm.append("file", $('#file')[0].files[0]); $.ajax({ url: '/Manage/UploadImg', type: 'POST', cache: false, data: oMyForm, processData:false, contentType: false, async: false }).done(function(res) {}).fail(function(res) {});
第二種方式:
<form id="uploadForm" enctype="multipart/form-data"> <p>指定檔名: <input type="text" name="filename" value="" /></p> <p>上傳檔案: <input type="file" name="file" /></ p> <input type="button" value="上傳" onclick="doUpload()" /> </form>
var formData = new FormData($('#uploadForm')[0]); formData.append('num', '1');//可以在已有表單資料的基礎上,繼續新增新的鍵值對 $.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, contentType: false }).done(function(res) {}).fail(function(res) {});
注意:
- Ajax的processData設定為false。因為data值是FormData物件,不需要對資料做處理。
- 第二種方式中<form>標籤加enctyp e="multipart/form-data"屬性。
- cache設定為false,上傳檔案不需要快取。
- contentType設定為false。因為是由<form>表單構造的FormData物件,且已經聲明瞭屬性enctype="mutipart/form-data",所以這裡設定為false。
前端搞定之後,剩下的就是後端處理了。ok,就到這裡了。
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"
屬性。
伺服器端讀檔案
參考
文/Agreal(簡書作者)
原文連結:http://www.jianshu.com/p/46e6e03a0d53
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。