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 來進行請求數據 代碼如下

    var url = "http://localhost:8100/detection/troop/faster_R_CNN?shape=480&shape=420";
      image_url = "http://localhost/sss/troop.jpg";
      var file;
      //獲取目前上傳的文件
      file = image.files[0];
      var formData = new FormData();
      formData.append('image', file);

        $.ajax({
        type: "POST",
        url: url,
        data: formData,   
        contentType: false, //告訴jQuery不要去設置Content-Type請求頭 14         headers: {
          Accept: "application/json"  
        },
        processData: false, //告訴jQuery不要去處理發送的數據 18         success: function (response) {
          console.log(response)
        }

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