系統學習前端之FormData詳解

jhhfft 發布于2019-08-20 10:32 / 2965人閱讀

摘要：概述類型其實是在級定義的，它是為序列化表以及創建與表單格式相同的數據當然是用于傳輸提供便利。如果是使用表單初始化，每一個表單字段對應一條數據，它們的屬性即為值，它們屬性對應值。參考兼容性查詢高級程序設計

FormData 1. 概述

FormData類型其實是在XMLHttpRequest 2級定義的，它是為序列化表以及創建與表單格式相同的數據（當然是用于XHR傳輸）提供便利。

2. 構造函數

創建一個formData對象實例有幾種方式

1、創建一個空對象實例

var formData = new FormData();

此時可以調用append()方法來添加數據

2、使用已有的表單來初始化一個對象實例

假如現在頁面已經有一個表單


    名字
    密碼

我們可以使用這個表單元素作為初始化參數，來實例化一個formData對象

// 獲取頁面已有的一個form表單
var form = document.getElementById("myForm");
// 用表單來初始化
var formData = new FormData(form);
// 我們可以根據name來訪問表單中的字段
var name = formData.get("name"); // 獲取名字
var psw = formData.get("psw"); // 獲取密碼
// 當然也可以在此基礎上，添加其他數據
formData.append("token","kshdfiwi3rh");

3. 操作方法

首先，我們要明確formData里面存儲的數據形式，一對key/value組成一條數據，key是唯一的，一個key可能對應多個value。如果是使用表單初始化，每一個表單字段對應一條數據，它們的HTML name屬性即為key值，它們value屬性對應value值。

key	value
k1	[v1,v2,v3]
k2	v4

3.1 獲取值

我們可以通過get(key)/getAll(key)來獲取對應的value，

formData.get("name"); // 獲取key為name的第一個值
formData.get("name"); // 返回一個數組，獲取key為name的所有值

3.2 添加數據

我們可以通過append(key, value)來添加數據，如果指定的key不存在則會新增一條數據，如果key存在，則添加到數據的末尾

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

3.3 設置修改數據

我們可以通過set(key, value)來設置修改數據，如果指定的key不存在則會新增一條，如果存在，則會修改對應的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

3.4 判斷是否該數據

我們可以通過has(key)來判斷是否對應的key值

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

3.5 刪除數據

通過delete(key)，來刪除數據

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []

3.6 遍歷

我們可以通過entries()來獲取一個迭代器，然后遍歷所有的數據，

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

可以看到返回迭代器的規則

每調用一次next()返回一條數據，數據的順序由添加的順序決定

返回的是一個對象，當其done屬性為true時，說明已經遍歷完所有的數據，這個也可以作為判斷的依據

返回的對象的value屬性以數組形式存儲了一對key/value，數組下標0為key，下標1為value，如果一個key值對應多個value，會變成多對key/value返回

我們也可以通過values()方法只獲取value值

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}

4. 發送數據

我們可以通過xhr來發送數據

var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

這種方式可以來實現文件的異步上傳。

參考

兼容性查詢

MDN

《JavaScript高級程序設計》

GPU云服務器云服務器機器學習入門之深度學習入門之pytorch 然之開源系統深度學習詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80197.html

面試寶典

摘要：有談談面試與面試題對于前端面試的一些看法。動態規劃算法的思想及實現方法幫大家理清動態規劃的解決思路以及原理方法前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。極客學院前端練習題道練習題，面試季練練手。由數據綁定和排序引入的幾個 JavaScript 知識點在 JavaScript 的數據綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

neu 2019-08-29 14:00 評論0 收藏0
AJAX的學習筆記（二）

摘要：與不同的是，應該以發送的數據作為請求的主體。有了這些不同的事件支持，開發者可以免去檢查之類的工作，更加的方便。其中事件和事件比較重要。而事件則會為在瀏覽器接收數據期間周期性地觸發。在上篇筆記中，我們主要談了一些概述和跨域的問題，這一次我們聊聊請求和響應的具體內容。向服務器發起請求我們在創建了XHR對象后，接著需要用兩個方法來發送請求：open()和send()，這兩個方法有點像賽...

Charles 2019-08-22 14:06 評論0 收藏0
antd 和 element上傳文件詳解與FormData詳解

摘要：當用戶完成選擇文件動作時，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因為的核心是對象，異步的實現是通過一個對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。背景平時工作中經常會遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。我們分別來看一下element 和 antd 手動上傳怎么處理：...

Fundebug 2019-08-23 10:29 評論0 收藏0
圖片上傳方案詳解

摘要：以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續使用上文的讀取圖片讀取完成是格式的圖片我們將上的設為讀取的結果即可實現預覽功能。以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。知識點字典 input 標簽之 file 類型 FileReader ...

glumes 2019-08-02 13:59 評論0 收藏0
圖片上傳方案詳解

摘要：以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續使用上文的讀取圖片讀取完成是格式的圖片我們將上的設為讀取的結果即可實現預覽功能。以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。知識點字典 input 標簽之 file 類型 FileReader ...

Karuru 2019-08-23 14:27 評論0 收藏0