資訊專欄INFORMATION COLUMN
摘要：概述類型其實(shí)是在級(jí)定義的，它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)當(dāng)然是用于傳輸提供便利。如果是使用表單初始化，每一個(gè)表單字段對(duì)應(yīng)一條數(shù)據(jù)，它們的屬性即為值，它們屬性對(duì)應(yīng)值。參考兼容性查詢高級(jí)程序設(shè)計(jì)
FormData 1. 概述
FormData類型其實(shí)是在XMLHttpRequest 2級(jí)定義的，它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)（當(dāng)然是用于XHR傳輸）提供便利。
2. 構(gòu)造函數(shù)創(chuàng)建一個(gè)formData對(duì)象實(shí)例有幾種方式
1、創(chuàng)建一個(gè)空對(duì)象實(shí)例
var formData = new FormData();
此時(shí)可以調(diào)用append()方法來添加數(shù)據(jù)
2、使用已有的表單來初始化一個(gè)對(duì)象實(shí)例
假如現(xiàn)在頁(yè)面已經(jīng)有一個(gè)表單
我們可以使用這個(gè)表單元素作為初始化參數(shù)，來實(shí)例化一個(gè)formData對(duì)象
// 獲取頁(yè)面已有的一個(gè)form表單
var form = document.getElementById("myForm");
// 用表單來初始化
var formData = new FormData(form);
// 我們可以根據(jù)name來訪問表單中的字段
var name = formData.get("name"); // 獲取名字
var psw = formData.get("psw"); // 獲取密碼
// 當(dāng)然也可以在此基礎(chǔ)上，添加其他數(shù)據(jù)
formData.append("token","kshdfiwi3rh");
3. 操作方法
首先，我們要明確formData里面存儲(chǔ)的數(shù)據(jù)形式，一對(duì)key/value組成一條數(shù)據(jù)，key是唯一的，一個(gè)key可能對(duì)應(yīng)多個(gè)value。如果是使用表單初始化，每一個(gè)表單字段對(duì)應(yīng)一條數(shù)據(jù)，它們的HTML name屬性即為key值，它們value屬性對(duì)應(yīng)value值。
| key | value |
|---|---|
| k1 | [v1,v2,v3] |
| k2 | v4 |
我們可以通過get(key)/getAll(key)來獲取對(duì)應(yīng)的value，
formData.get("name"); // 獲取key為name的第一個(gè)值
formData.get("name"); // 返回一個(gè)數(shù)組，獲取key為name的所有值
3.2 添加數(shù)據(jù)
我們可以通過append(key, value)來添加數(shù)據(jù)，如果指定的key不存在則會(huì)新增一條數(shù)據(jù)，如果key存在，則添加到數(shù)據(jù)的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]
3.3 設(shè)置修改數(shù)據(jù)
我們可以通過set(key, value)來設(shè)置修改數(shù)據(jù)，如果指定的key不存在則會(huì)新增一條，如果存在，則會(huì)修改對(duì)應(yīng)的value值。
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
3.4 判斷是否該數(shù)據(jù)
我們可以通過has(key)來判斷是否對(duì)應(yīng)的key值
formData.append("k1", "v1");
formData.append("k2",null);
formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
3.5 刪除數(shù)據(jù)
通過delete(key)，來刪除數(shù)據(jù)
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");
formData.getAll("k1"); // []
3.6 遍歷
我們可以通過entries()來獲取一個(gè)迭代器，然后遍歷所有的數(shù)據(jù)，
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}
可以看到返回迭代器的規(guī)則
每調(diào)用一次next()返回一條數(shù)據(jù)，數(shù)據(jù)的順序由添加的順序決定
返回的是一個(gè)對(duì)象，當(dāng)其done屬性為true時(shí)，說明已經(jīng)遍歷完所有的數(shù)據(jù)，這個(gè)也可以作為判斷的依據(jù)
返回的對(duì)象的value屬性以數(shù)組形式存儲(chǔ)了一對(duì)key/value，數(shù)組下標(biāo)0為key，下標(biāo)1為value，如果一個(gè)key值對(duì)應(yīng)多個(gè)value，會(huì)變成多對(duì)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. 發(fā)送數(shù)據(jù)
我們可以通過xhr來發(fā)送數(shù)據(jù)
var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);
這種方式可以來實(shí)現(xiàn)文件的異步上傳。
參考兼容性查詢
MDN
《JavaScript高級(jí)程序設(shè)計(jì)》
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80197.html
摘要：有談?wù)劽嬖嚺c面試題對(duì)于前端面試的一些看法。動(dòng)態(tài)規(guī)劃算法的思想及實(shí)現(xiàn)方法幫大家理清動(dòng)態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁(yè)面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個(gè)方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個(gè) JavaScript 知識(shí)點(diǎn) 在 JavaScript 的數(shù)據(jù)綁定和做簡(jiǎn)單的表格排序中遇到的幾個(gè)知識(shí)點(diǎn) [[JS 基礎(chǔ)...
摘要：與不同的是，應(yīng)該以發(fā)送的數(shù)據(jù)作為請(qǐng)求的主體。有了這些不同的事件支持，開發(fā)者可以免去檢查之類的工作，更加的方便。其中事件和事件比較重要。而事件則會(huì)為在瀏覽器接收數(shù)據(jù)期間周期性地觸發(fā)。 在上篇筆記中，我們主要談了一些概述和跨域的問題，這一次我們聊聊請(qǐng)求和響應(yīng)的具體內(nèi)容。 向服務(wù)器發(fā)起請(qǐng)求 我們?cè)趧?chuàng)建了XHR對(duì)象后，接著需要用兩個(gè)方法來發(fā)送請(qǐng)求：open()和send()，這兩個(gè)方法有點(diǎn)像賽...
摘要：當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁(yè)面中的。從此我們上傳文件就歡欣鼓舞的來找了。因?yàn)榈暮诵氖菍?duì)象，異步的實(shí)現(xiàn)是通過一個(gè)對(duì)象，一般簡(jiǎn)稱該對(duì)象對(duì)。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。 背景 平時(shí)工作中經(jīng)常會(huì)遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。 我們分別來看一下element 和 antd 手動(dòng)上傳怎么處理：...
摘要：以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。構(gòu)造函數(shù)返回一個(gè)新構(gòu)造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續(xù)使用上文的讀取圖片讀取完成是格式的圖片我們將上的設(shè)為讀取的結(jié)果即可實(shí)現(xiàn)預(yù)覽功能。 以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。 知識(shí)點(diǎn)字典 input 標(biāo)簽之 file 類型 FileReader ...
摘要：以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。構(gòu)造函數(shù)返回一個(gè)新構(gòu)造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續(xù)使用上文的讀取圖片讀取完成是格式的圖片我們將上的設(shè)為讀取的結(jié)果即可實(shí)現(xiàn)預(yù)覽功能。 以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。 知識(shí)點(diǎn)字典 input 標(biāo)簽之 file 類型 FileReader ...
閱讀 2968·2021-09-22 15:43
閱讀 5296·2021-09-06 15:02
閱讀 910·2019-08-29 13:55
閱讀 1745·2019-08-29 12:58
閱讀 3141·2019-08-29 12:38
閱讀 1313·2019-08-26 12:20
閱讀 2320·2019-08-26 12:12
閱讀 3394·2019-08-23 18:35
