formData詳細使用教程

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData對象可以將form表單元素的name與value進行組合,實現表單數據的序列化,從而介紹表單元素的拼接,提高工作效率

創建formData對象

 var formData=new FormData(form);
 // 通過append()方法追加數據
 formData.append("name","Lori");

 

FormData提供的方法

FormData.append()

  向 FormData 中添加新的屬性值，如果FormData 對應的屬性值存在則覆蓋原值，否則新增一項屬性值。

FormData.set()

給 FormData 設置屬性值，如果FormData 對應的屬性值存在則覆蓋原值，否則新增一項屬性值

FormData.get()

返回在 FormData 對象中與給定鍵關聯的第一個值

FormData.getAll()

返回一個包含 FormData 對象中與給定鍵關聯的所有值的數組。

FormData.delete():從FormData對象里面刪除一個鍵值對

FormData.has()

返回一個布爾值表明 FormData 對象是否包含某些鍵

FormData.keys()

返回一個包含所有鍵的iterator對象

FormData.values()

返回一個包含所有值的iterator對象。

FormData.entries()

返回一個包含所有鍵值對的iterator對象

兼容性:

下面能我們就使用下面的例子來給大家演示一下怎么使用:

創建表單:

 <form id="userForm">
        <p>姓名：<input type="text" name="userNamee" value="李白"></p>
        <p>性別：<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female" >女
        </p>
        <p>城市：<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">廣州</option>
                <option value="4">深圳</option>
            </select></p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>

操作方法

let btn = document.getElementById("btn");
        btn.onclick = function () {
            // 根據ID獲得頁面中的form表單元素
            var form = document.querySelector("#userForm");
            // 將獲得的表單元素作為參數,對formData進行初始化
            var formData = new FormData(form);
            formData.append("name", "Lori");
            formData.append("name", "Jack");
            formData.append("gender", "Jacie");
            // 通過get方法只能讀取第一個key為name的值
            console.log(formData.get("name")); // Lori
            // 通過getAll方法能獲取到所有key為name的值
            console.log(formData.getAll("name")); //["Lori","Jack"]
            // 通過set修改數據,如果存在多個的話,就會改到只剩下一個key為name的值
            formData.set('name', "李白"); // ["李白"]
            // 如果不存在的話,就會添加一條數據
            formData.set('age', 30);
            console.log(formData.getAll('name'));
            console.log(formData.getAll('age'));
            // 通過delete方法刪除key為gender的數據
            formData.delete("gender");
            console.log(formData.get('gender')); // null

            for (let keys of formData.keys()) {
                console.log(keys); // userName  sex city name age
            }

            for (let keys of formData.entries()) {
                console.log(keys); // ["userNamee", "李白"] ["sex", "male"] ["city", "1"] ["name", "李白"] ["age", "30"]
            }

            for (let keys of formData.values()) {
                console.log(keys);
            }
        }

文件上傳

下面我們來做一個文件上傳的例子:

創建表單

<form id="userForm">
        <p>姓名：<input type="text" name="userNamee" value="李白"></p>
        <p>性別：<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female">女
        </p>
        <p>城市：<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">廣州</option>
                <option value="4">深圳</option>
            </select></p>
        <p>
            頭像:<input type="file" name="headImg"></p>
        </p>
        <p><input type="button" id="btn" value="添加"></p>
    </form>

 

發送數據

 let btn = document.getElementById("btn");
        btn.onclick = function () {
            
            var formdata=new FormData(document.getElementById("userForm"));
            var xhr = new XMLHttpRequest();
            xhr.open("post", "file.php");
        
            // 監聽上傳進度
            xhr.upload.onprogress=function(ev){
                let percent=(ev.loaded/ev.total)*100+'%';
                console.log(percent)
            }
            xhr.send(formdata);
        
            xhr.onload = function () {
                if (xhr.status == 200) {
                    //...
                }
            }

        }