XMLHttpRequest 是一個瀏覽器接口,通過它,我們可以使得 Javascript 進行 HTTP (S) 通信。XMLHttpRequest 在現在瀏覽器中是一種常用的前后台交互數據的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出來了,相對於上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一個對象,利用它來提交表單、模擬表單提交,當然最大的優勢就是可以上傳二進制文件。下面就具體介紹一下如何利用 FormData 來上傳文件。
FormData 上傳文件實例
首先看一下formData的基本用法:FormData對象,可以把所有表單元素的name與value組成一個queryString,提交到后台。只需要把 form 表單作為參數傳入 FormData 構造函數即可:
var file;
//獲取目前上傳的文件
file = image.files[0]; //獲取上傳的文件名
var formData = new FormData();
formData.append('image', file); //append方法傳入formData中
這樣就可以直接通過ajax 的 send() 方法將 fd 發送到后台。
以下創建了一個表單 form,表單中除了普通的數據外,還有文件上傳,我們直接將 form對象作為參數傳入FormData對象:
<input type="file" class="file" id="image" accept="image/gif,image/jpeg,image/jpg,image/png" />
<button id="test" onclick="func()">demo</button>
上述代碼創建一個上傳圖片。
我們初始用jquery ajax 來進行請求數據 代碼如下
1 var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420"; 2 image_url = "http://localhost/sss/troop.jpg"; 3 var file; 4 //獲取目前上傳的文件 5 file = image.files[0]; 6 var formData = new FormData(); 7 formData.append('image', file); 8 9 $.ajax({ 10 type: "POST", 11 url: url, 12 data: formData, 13 contentType: false, //告訴jQuery不要去設置Content-Type請求頭 14 headers: { 15 Accept: "application/json" 16 }, 17 processData: false, //告訴jQuery不要去處理發送的數據 18 success: function (response) { 19 console.log(response) 20 }
然后我們用XHR原生請求代碼如下
1 var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420"; 2 image_url = "http://localhost/sss/troop.jpg"; 3 var file; 4 //獲取目前上傳的文件 5 file = image.files[0]; 6 var formData = new FormData(); 7 formData.append('image', file); 8 var xhr = new XMLHttpRequest(); 9 var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";; 10 xhr.open('POST', url, true); 11 xhr.setRequestHeader("Accept", "application/json"); 12 xhr.send(formData);
我們發現jQuery中ajax請求和XHR對象請求參數並不一樣,因為在jquery中ContenType和processData會默認處理發送的數據,會導致請求報錯(500錯誤,jquery給默認封裝了
因此在jQuery中要加false這兩個參數。就會正常的請求成功。