　　好程式設計師 web 前端培訓分享 FormData 簡單介紹， FormData 是 Ajax 2.0 物件用以將資料編譯成鍵值對，以便於 XMLHttpRequest 來傳送資料。XMLHttpRequest Level 2 提供的一個介面物件，可以使用該物件來模擬和處理表單並方便的進行 檔案上傳 操作。

我們列印這個建構函式看一眼

ƒ FormData()

arguments : null

caller : null

length : 0

name : "FormData"

prototype : FormData

append : ƒ append()

delete: ƒ delete ()

entries : ƒ entries()

forEach : ƒ forEach()

get : ƒ ()

getAll : ƒ getAll()

has : ƒ has()

keys : ƒ keys()

set : ƒ ()

values : ƒ values()

constructor : ƒ FormData()

Symbol(Symbol.iterator) : ƒ entries()

Symbol(Symbol.toStringTag) : "FormData"

__proto__ : Object

__proto__ : ƒ ()

[[Scopes]] : Scopes[ 0 ]

透過列印並檢視 formData 的結構，可以發現該介面物件本身非常簡單。在 formData 建構函式原型物件上只有 append 、 forEach 、 keys 等少數方法。

FormData的主要用處

網路請求中處理表單資料
網路請求中處理用來非同步的上傳檔案

FormData 例項的建立

◆ new FormData ( HTMLFormElement: ele)

在使用 FormData 建構函式建立例項物件的時候，可以傳遞一個HTML表單元素，該表單元素允許是任何形式的表單控制元件，包括檔案輸入框、核取方塊等。

< form name = "formTest" >

< input type = "text" placeholder = "請輸入使用者名稱" name = "user" value = "wendingding" >

< input type = "password" placeholder = "請輸入密碼" name = "pass" value = "123456789" ></ form >

//列出建立formData例項物件的幾種方式//001 透過建構函式建立不傳遞任務引數 var formData1 = new FormData(); //空的例項物件 //透過呼叫物件的方法來設定資料(模擬表單)//設定資料 formData1.set( "name" , "文頂頂" );formData1.set( "email" , "wendingding_ios@126.com" );formData1.set( "friends" , "熊大" );

//設定資料(追加) formData1.append( "friends" , "光頭強" );formData1.append( "friends" , "蘿蔔頭" );

//檢視例項資料 formData1.forEach( function (value,key){

console.log(key,value);})console.log( "----------------------------------" ); //002 獲取表單標籤傳遞給FormData建構函式 var formData2 = new FormData( document .getElementById( "formTest" ))formData2.forEach( function (value,key){

console.log(key,value);})

注意： 表單標籤必須要新增name屬性才能獲取其資料

說明： 在上面的示例程式碼中介紹了兩種建立(獲取) formData 例項物件的方式，可以先建立一個空的例項物件也可以直接透過頁面中的表單標籤來進行初始化處理。

當 formData 資料裝填好之後，可以直接透過ajax方法提交到伺服器端，下面給出上面程式碼的執行結果。

FormData 的主要方法

如上圖所示， FormData 建構函式的原型物件上面定義了一堆方法。這些方法使用方式都很簡單，接下來我們透過程式碼的方式簡單介紹他們。

//01 建立空的formData例項物件 var data = new FormData();

//02 設定資料(新增) data.set( "age" , 18 );

data.set( "name" , "LiuY" );

data.set( "type" , "法師" );

data.set( "address" , "泉水中心" );

//03 設定資料(修改和刪除) data.set( "name" , "MiTaoer" );

data. delete ( "address" );

//04 設定資料(追加) data.append( "type" , "戰士" );

data.append( "type" , "輔助" ); ===========================================

//05 讀取資料(指定key-one) console.log(data.get( "name" )); //MiTaoer console.log(data.get( "type" )); //法師

//06 讀取資料(指定key-All) console.log(data.getAll( "type" )); //["法師", "戰士", "輔助"]

//07 檢查是否擁有指定的key console.log(data.has( "age" )); //true console.log(data.has( "email" )); //false

//08 迭代器的基本使用(keys) var keyIterator = data.keys() //獲取迭代器物件 console.log(keyIterator.next()); //{done: false, value: "age"} console.log(keyIterator.next()); //{done: false, value: "name"} console.log(keyIterator.next()); //{done: false, value: "type"} console.log(keyIterator.next()); //{done: false, value: "type"} console.log(keyIterator.next()); //{done: false, value: "type"} console.log(keyIterator.next()); //{done: true, value: undefined}

console.log( "___________________" );

//09 迭代器的基本使用(values) var valueIterator = data.values(); //獲取迭代器物件 console.log(valueIterator.next()); //{done: false, value: "18"} console.log(valueIterator.next()); //{done: false, value: "MiTaoer"} console.log(valueIterator.next()); //{done: false, value: "法師"} console.log(valueIterator.next()); //{done: false, value: "戰士"} console.log(valueIterator.next()); //{done: false, value: "輔助"} console.log(valueIterator.next()); //{done: true, value: undefined}

//10 迭代器的基本使用(entries) console.log(data.entries().next()); //{done: false, value: ["age", "18"]}

//11 formData物件的遍歷 data.forEach( function (value,key){

//輸出結果 // age 18 // name MiTaoer // type 法師 // type 戰士 // type 輔助 console.log(key,value);

})

程式碼說明

formData 物件 的這些方法其實不用進行過多的贅述，上面的程式碼和說明簡單易懂。總體上來說，它提供了一整套的運算元據的方法囊括了新增(set)、修改、查詢和刪除等操作， append 方法和set方法的不同之處在於它不會覆蓋而是以陣列push的方式來處理同名的資料。

formData 物件 的 keys() 、 values() 和 entries() 方法使用類似，呼叫後將得到一個 Iterator型別的迭代器物件，該物件能夠能夠呼叫 next() 方法來進行迭代操作，列印結果中的 done 使用布林型別的值來進行標記，如果迭代結束那麼值為 true 。

formData 物件 的 forEach() 接收一個回撥函式引數，其中第一個引數為當前遍歷資料的 value 值，第二個引數為 key (同陣列的forEach方法一致)。如果是Ajax傳送GET請求，需要透過formData的方式來提交表單資料，那麼可以藉助該方法來拼接查詢字串。

FormData的典型用法
這裡給定如下的表單資料，然後介紹如何使用FormData來處理表單資料傳送GET和POST請求。

< form name = "formTest" >

< input type = "text" name = "user" placeholder = "請輸入使用者名稱" >< br >

< input type = "text" name = "email" placeholder = "請輸入郵箱" >< br >

< input type = "password" name = "pass" placeholder = "請輸入密碼" >< br >

< input type = "checkbox" name = "check" > 是否勾選 < br ></ form >< button > 提交表單資料 </ button > ``` < div style = 'background:#195;color:#fff;width:120px;text-align:center' > **GET請求** </ div >

//01 獲取頁面中的btn標籤 var oBtn = document .getElementsByTagName( "button" )[ 0 ];

//02 給按鈕標籤新增點選事件 oBtn.onclick = function (){

//03 使用Ajax傳送GET請求 var xhr = new XMLHttpRequest();

xhr.open( "GET" , " + getData(), true );

xhr.send();

xhr.onreadystatechange = function (){

if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304 )

{

console.log( "請求成功" + xhr.responseText);

} else {

console.log( "請求失敗" + xhr.statusText);

}

//獲取頁面中的表單資料並處理為查詢字串 function getData(){

var arr = [];

var data = new FormData( document .forms.namedItem( "formTest" ));

data.append( "age" , 18 );

data.forEach( function (value,key){

arr.push(key + "=" + value);

})

return arr.join( "&" );

}

透過上面的程式碼示例可以發現，使用 formData 來處理表單資料傳送 GET 請求並沒有什麼優勢，也需要透過迴圈來處理然後把鍵值對轉換為查詢字串的形式拼接在 URL字串的後面。

POST請求

//01 獲取頁面中的btn標籤 var oBtn = document .getElementsByTagName( "button" )[ 0 ];

//02 給按鈕標籤新增點選事件 oBtn.onclick = function (){

//03 處理引數 //方式(1) 模擬表單資料 var data = new FormData();

data.set( "name" , "文頂頂" );

data.set( "color" , "red" );

data.set( "email" , "yangyong@520it.com" );

data.append( "email" , "wendingding_ios@126.com" );

//方式(2) 獲取表單資料 //var data = new FormData(document.forms.namedItem("formTest"));

//04 使用Ajax傳送GET請求 var xhr = new XMLHttpRequest();

xhr.open( "POST" , " , true );

xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );

xhr.send(data);

xhr.onreadystatechange = function (){

if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304 )

{

console.log( "請求成功" + xhr.responseText);

} else {

console.log( "請求失敗" + xhr.statusText);

}

如果傳送的是POST請求，那麼提交表單資料需要透過 setRequestHeader 方法來設定 'Content-Type', 'application/x-www-form-urlencoded' ，而formData資料直接作為 send 方法的引數來進行提交即可。 POST 請求透過formData提交給伺服器端的資料，如果是Node伺服器端則很難處理(同檔案一樣)。 formData 最主要的用途其實是用來非同步的進行檔案上傳。

POST請求進行檔案上傳

< form >

< input type = "text" name = "user" id = "userID" >

< input type = "file" name = "file-name" id = "fileID" multiple ></ form >< button > 上傳檔案 </ button >

//01 獲取頁面中的btn標籤 var oBtn = document .getElementsByTagName( "button" )[ 0 ];

var oUser = document .getElementById( "userID" );

var oFileID = document .getElementById( "fileID" );

//02 給按鈕標籤新增點選事件 oBtn.onclick = function (){

//03 獲取表單中的檔案內容 var data = new FormData();

data.set( "user" ,oUser.value);

Array .from(oFileID.files).forEach( function (file){

data.append( "fileName" ,file);

})

//04 使用Ajax傳送GET請求 var xhr = new XMLHttpRequest();

xhr.open( "POST" , " , true );

xhr.send(data);

xhr.onreadystatechange = function (){

if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304 )

{

console.log( "請求成功" + xhr.responseText);

} else {

console.log( "請求失敗" + xhr.statusText);

}

這裡順便貼出測試檔案上傳寫的Node程式碼以及檔案上傳後的監聽結果。

//備註：node檔名稱為uploadServer.js//01 匯入模組(需先透過npm來進行安裝) var express = require( 'express' ); var multer = require( 'multer' ); var body = require( 'body-parser' ); var app = express();app.listen( 5000 );app.use(body.urlencoded( { extended : false } ));app.use(multer( { dest : './upload/' } ).any()); //02 監聽網路請求並設定列印接收到的引數資訊 app.post( '/api' , function (req,res){

res.setHeader( 'Access-Control-Allow-Origin' , '*' );

res.send( "Nice ! 上傳成功 ~ " ); console.log(req.body); //普通POST資料 console.log(req.files); //檔案POST資料 });app.use(express. static ( './html/' ));

程式碼說明 需要先透過 npm install express multer body-parser 命令在當前路徑中安裝對應的模組。

wendingding$ node uploadServer.js

{ user: 'wen' }

[ { fieldname: 'fileName',

originalname: 'formData.png',

encoding: '7bit',

mimetype: 'image/png',

destination: './upload/',

filename: 'f416da3b522ece9e4cc2eccd5b7a62e8',

path: 'upload/f416da3b522ece9e4cc2eccd5b7a62e8',

size: 50002 },

{ fieldname: 'fileName',

originalname: 'Snip20190107_1.png',

encoding: '7bit',

mimetype: 'image/png',

destination: './upload/',

filename: '2a2dd60e217b9cc08f2cc0048a1d27ab',

path: 'upload/2a2dd60e217b9cc08f2cc0048a1d27ab',

size: 1309894 } ]

好程式設計師web前端培訓分享FormData 簡單介紹

相關文章