H5 FormData對象的使用——進行Ajax請求並上傳文件

XMLHttpRequest Level2 添加了一個新的接口——FormData 。【 主要用於發送表單數據,但也可以獨立使用於傳輸鍵控數據。與普通的Ajax相比，它能異步上傳二進制文件 】

利用FormData對象，可通過js用一些鍵值對來模擬一系列表單控件，還可以使用XMLHttpRequest的send()方法異步提交表單。

首先，在之前的“前后台交互之傳參方式”中講了傳統的form表單提交的方式（表單序列化），它只適用於傳遞一般參數，上傳文件的文件流是無法被序列化並傳遞的。所以，使用FormData，可以輕松的和ajax結合進行文件上傳。

一、在介紹使用FormData進行Ajax請求並上傳文件之前，先來認識一下FormData以及它的使用：：：：：

W3C 草案提供了三種方案來獲取或修改 Form Data :::

WAY1：創建一個空的 Form Data 對象，再用 append() 逐個添加鍵值對

var oMyForm = new FormData();    // 創建一個空的FormData對象
oMyForm.append("userName","Coco");       // append()方法添加字段
oMyForm.append("accountNum",123456);   // 數字123456立即被轉換成字符串“123456”
oMyForm.append("userFile",fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"});  // Blob對象包含的文件內容是oFileBody
oMyForm.append("webmasterfile",oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST","   .php");
oPeq.send(oMyForm);   // 使用XMLHttpRequest的send()把數據發送出去

 上面的"userFile"和"webmasterfile"的值都包含了一個文件；

 字段的值可以是一個Blob對象，File對象或者字符串，別的類型都會被自動轉換成字符串——例如上面的"accountNum" 。

WAY2：取form元素對象作為參數傳入FormData對象中

—— 偽代碼 ——

var new_FormData = new FormData( someFormElement );           

例：

var FormElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST","     .php");
oReq.send(new FormData(FormData));

也可以在已有表單基礎上繼續添加新的鍵值對：

var FormElement = document.getElementById("myFormElement");
var formData = new FormData(FormElement);
formData.append("serialnumber",serialNumber++);

var oReq = new XMLHttpRequest();
oReq.send(formData);

可以通過這種方式添加一些不想讓用戶編輯的固定字段，然后再發送。

WAY3：利用form對象的getFormData方法生成

var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();

利用 FormData 對象，結合原生的 js，通過 ajax 實現異步上傳圖片。當然，現在已有的 jquery 批量上傳的插件，原理就是利用 FormData。

二、使用 FormData對象發送二進制文件：：：：：：

way1:通過 form 表單來初始化 FormData

1、在 html 中有一個包含文件輸入框的 form 元素

<form enctype="multipare/form-data" method="post" name="fileinfo">

      <label>your email address:</label>
      <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"/><br>

      <label>custom file label:</label>
      <input type="text" name="filelabel"  size="12" maxlength="32"/><br>

      <label>File to stash:</label>
      <input type="file" name="file" required>

</form>

<div id="Output"></div>
<a href="javascript:sendForm()">stash the file !</a>

2、異步上傳用戶所選的文件

function sendForm(){
      var oOutput = document.getElementById("Output");
      var oData = new FormData(document.forms.nameItem("fileInfo"));
      oData.append("customField","This is some extra data");
      
      var oReq = new XMLHttpRequest();
      oReq.open("POST","     .php",true);
      oReq.onload = function(oEvent){
            if(oReq.status == 200){
                   oOutput.innerHTML = "Uploaded!";
            }else{
                   oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!"
            }
      };
      oReq.send(oData);
}

WAY2:不借助 form 表單，直接向 FormData 對象中添加一個 File 對象或者一個 Blob 對象

var data = new FormData();

var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"});

data.append("myfile",oBlob);

如果 FormData 對象中某個字段值是一個 Blob 對象，在發送 HTTP 請求時，代表該 Blob 對象所包含文件的文件名的 “content-Disposition” 請求的值在不同瀏覽器中不同：

Firefox 使用固定的字符串 "blob"，而 chrome使用一個隨機字符串。

WAY3：使用 Jquery 發送 FormData（要正確設置相關項）

var fd =new FormData(document.getElementById("fileinfo"));
fd.append("customField","This is some extra data");
$.ajax({
     url:"    .php",
     type:"POST",
     data:fd,
     processData:false,   //  告訴jquery不要處理發送的數據
     contentType:false    // 告訴jquery不要設置content-Type請求頭
});

三、例子

1、使用 FromData 進行 Ajax 請求，並上傳文件

<form id="uploadForm">
      指定文件名:<input type="text" name="filename" value="">
      上傳文件:<input type="file" name="file">
      
       <input type="button" value="上傳" onclick="doUpload()">
</form>

function doUpload(){
    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
          url:"   .php",
          type:"POST",
          data:formData,
          async:false,
          cache:false,
          contentType:false,
          processData:false,
          success:function(returndata){
                 alert(returndata);
          },
          error:function(returndata){
                 alert("error:"+returndata);
          }
    });
}

2、使用 FormData 提交表單及上傳圖片

<form name="form" id="formData">

       name:<input type="text" name="name">
       gender:<input type="radio" name="gender" value="1"> male
              <input type="radio" name="gender" value="2"> female
       photo:<input type="file" name="photo" id="photo">

       <input type="button" name="btn" value="submit" onclick="submit();">       

</form>

<div id="result"></div>

function submit(){
       var data = new FormData($("#formData")[0]);
       $.ajax({
              url:"    .php",
              type:"POST",
              data:data,
              dataType:"JSON",
              cache:false,
              processData:false,
              contentType:false
        }).done(function(ret){
                  if(ret["isSuccess"]){
                      var result = "";
                      result +="name=" + ret["name"] + "<br>";
                      result += "gender=" + ret["gender"] + "<br>";
                      result += "<img src='"+ret['photo']+"'width='100'>";
                             
                      $("#result").html(result);         // 提交成功后將表單數據顯示在id="result"的div里面     
                  }else{
                         alert("提交失敗");
                   }
         });
       return false;
}

四、瀏覽器兼容性

Chrome	Firefox(Gecko)	IE	Opera	Safari
7+	4.0(2.0)+	10+	12+	5+