FormData對象進行Ajax請求，上傳檔案

這篇文章給大家分享的內容是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對象包含的檔案內容是oFileBodyoMyForm.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><p id="Output"></p><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><p id="result"></p>

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"的p裡面                       }else{                         alert("提交失敗");                   }         });       return false;}

四、瀏覽器安全色性

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