首頁 > 文章 > 後端開發 > FormData物件進行Ajax請求，上傳文件

FormData物件進行Ajax請求，上傳文件

不言原創: 2018-07-18 16:20:233105瀏覽

這篇文章要跟大家分享的內容是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 元素

616446c85450afc472a9bd8ec9e64146

      2e1cf0710519d5598b1f0f14c36ba674your email address:8c1ecd4bb896b2264e0711597d40766c
      77ea3818c28708bdfa2d740f63ca84430c6dc11e160d3b678d68754cc175188a

      2e1cf0710519d5598b1f0f14c36ba674custom file label:8c1ecd4bb896b2264e0711597d40766c
      c53720150e0e40fa90d71213512a19430c6dc11e160d3b678d68754cc175188a

      2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c
      37618ecaa97ade89cdcd8c57e3705350f5a47148e367a6035fd7a2faa965022e8682d3dcb51d71511882c0fb08275db494b3e26ee717c64999d7867364b1b4a334fbcf1a3d1404e3f48634a414c8f9f7stash the file !5db79b134e9f6b82c0b36e0489ee08ed

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=&#39;"+ret[&#39;photo&#39;]+"&#39;width=&#39;100&#39;>";
                             
                      $("#result").html(result);         // 提交成功后将表单数据显示在id="result"的p里面     
                  }else{
                         alert("提交失败");
                   }
         });       return false;
}

四、瀏覽器相容性

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

FormData物件進行Ajax請求，上傳文件

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

二、使用FormData物件傳送二進位檔案：：：：：：

三、範例

四、瀏覽器相容性

相關文章