HTML5 FormData 方法介紹以及實現文件上傳


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這兩個參數。就會正常的請求成功。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM