FormData的主要用處及實例用法介紹

本篇內容主要講解“FormData的主要用處及實例用法介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“FormData的主要用處及實例用法介紹”吧!

我們打印這個構造函數看一眼

? 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","http://127.0.0.1:3000?"+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","http://127.0.0.1:3000",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","http://127.0.0.1:5000/api",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 } ]

到此，相信大家對“FormData的主要用處及實例用法介紹”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！