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...