FormData使用方法詳解

2022-06-15 19:00:18 字數 4692 閱讀 9523

formdata的主要用途有兩個:

1、將form表單元素的name與value進行組合,實現表單資料的序列化,從而減少表單元素的拼接,提高工作效率。

2、非同步上傳檔案1、建立乙個空物件:

//

通過formdata建構函式建立乙個空物件

var formdata=new

formdata();

////

通過get方法對值進行讀取

console.log(formdata.get("name"));//

laotie

//通過set方法對值進行設定

formdata.set("name","laoliu");

console.log(formdata.get("name"));//

laoliu

2、通過表單對formdata進行初始化

建立表單:

<

form

id="advform"

>

<

p>廣告名稱:<

input

type

="text"

name

="advname"

value

="xixi"

>

p>

<

p>廣告類別:<

select

name

="advtype"

>

<

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

>

通過表單元素作為引數,實現對formdata的初始化:

//

獲得表單按鈕元素

var btn=document.queryselector("#btn");

//為按鈕新增點選事件

btn.onclick=function

()

1、通過get(key)與getall(key)來獲取相對應的值

//

獲取key為age的第乙個值

formdata.get("age"); //

獲取key為age的所有值,返回值為陣列型別

formdata.getall("age");

//

通過formdata建構函式建立乙個空物件

var formdata=new

formdata();

////

////

通過get方法讀取key為name的第乙個值

console.log(formdata.get("name"));//

laoliu

//通過getall方法讀取key為name的所有值

console.log(formdata.getall("name"));//

["laoliu", "laoli", "laotie"]

3、通過set(key, value)來設定修改資料

key的值不存在,會新增一條資料

//

通過formdata建構函式建立乙個空物件

var formdata=new

formdata();

//如果key的值不存在會為資料新增乙個key為name值為laoliu的資料

formdata.set("name","laoli");

//通過get方法讀取key為name的第乙個值

console.log(formdata.get("name"));//

laoli

key的值存在,會修改對應的value值

//

通過formdata建構函式建立乙個空物件

var formdata=new

formdata();

////

//通過get方法讀取key為name的第乙個值

console.log(formdata.get("name"));//

laoliu

//通過getall方法讀取key為name的所有值

console.log(formdata.getall("name"));//

["laoliu", "laoliu2"]

//將存在的key為name的值修改為laoli

formdata.set("name","laoli");

//通過get方法讀取key為name的第乙個值

console.log(formdata.get("name"));//

laoli

//通過getall方法讀取key為name的所有值

console.log(formdata.getall("name"));//

["laoli"]

4、通過has(key)來判斷是否存在對應的key值

//

通過formdata建構函式建立乙個空物件

var formdata=new

formdata();

////

判斷是否包含key為name的資料

console.log(formdata.has("name"));//

true

//判斷是否包含key為age的資料

console.log(formdata.has("age"));//

false

5、通過delete(key)可以刪除資料

//

通過formdata建構函式建立乙個空物件

var formdata=new

formdata();

"name"));//

laoliu

//刪除key為name的值

formdata.delete("name");

console.log(formdata.get("name"));//

null

建立表單:

<

form

id="advform"

>

<

p>廣告名稱:<

input

type

="text"

name

="advname"

value

="xixi"

>

p>

<

p>廣告類別:<

select

name

="advtype"

>

<

option

value

="1"

>輪播圖

option

>

<

option

value

="2"

>輪播圖底部廣告

option

>

<

option

value

="3"

>熱門**廣告

option

>

<

option

value

="4"

>優品精選廣告

option

>

select

>

p>

<

p>廣告:<

input

type

="file"

name

="advpic"

>

p>

<

pinput

type

="text"

name

="advurl"

>

p>

<

p>廣告排序:<

input

type

="text"

name

="orderby"

>

p>

<

p><

input

type

="button"

id="btn"

value

="新增"

>

p>

form

>

傳送資料:

var btn=document.queryselector("#btn");

btn.onclick=function

() }

}

FormData使用方法詳解

formdata的主要用途有兩個 將form表單元素的name與value進行組合,實現表單資料的序列化,從而減少表單元素的拼接,提高工作效率。非同步上傳檔案 通過formdata建構函式建立乙個空物件 var formdata new formdata 通過get方法對值進行讀取 console....

FormData使用方法詳解

formdata的主要用途有兩個 1 將form表單元素的name與value進行組合,實現表單資料的序列化,從而減少表單元素的拼接,提高工作效率。2 非同步上傳檔案 一 建立formdata物件 1 建立乙個空物件 通過formdata建構函式建立乙個空物件 var formdata new fo...

FormData使用方法詳解

formdata的主要用途有兩個 1 將form表單元素的name與value進行組合,實現表單資料的序列化,從而減少表單元素的拼接,提高工作效率。2 非同步上傳檔案 一 建立formdata物件 1 建立乙個空物件 通過formdata建構函式建立乙個空物件 var formdata new fo...