FormData是Ajax2.0(XMLHttpRequest Level2)提供的一種將form表單元素name和value組合成鍵值盗蟆，實現(xiàn)表單數(shù)據(jù)的序列化戈二，從而減少from表單元素的拼接，提高工作效率對的接口喳资，以方便將form表單數(shù)據(jù)通過XMLHttpRequest.send() 方法發(fā)送到后端觉吭，可以使用該對象來處理form表單元素并方便的進行文件上傳。
XMLHttpRequest 是一個瀏覽器接口仆邓，通過它鲜滩，我們可以使用Javascript進行 HTTP (S) 通信。XMLHttpRequest 在現(xiàn)在瀏覽器中是一種常用的前后臺交互數(shù)據(jù)的方式节值。2008年 2 月徙硅，XMLHttpRequest Level 2 草案提出來了，相對于上一代搞疗，它有一些新的特性嗓蘑，其中FormData 就是XMLHttpRequest Level 2 新增的一個對象，利用它來提交表單匿乃、模擬表單提交脐往，當然最大的優(yōu)勢就是可以上傳二進制文件。
一扳埂、FormData主要用途
將form表單元素的name和value組合成鍵值對业簿，實現(xiàn)表單數(shù)據(jù)序列化，提高開發(fā)效率阳懂。
異步上傳文件梅尤。
二、FormData用法詳解
- FormData方法
FormData.append()向 FormData 中添加新的屬性值岩调，F(xiàn)ormData 對應的屬性值存在也不會覆蓋原值巷燥，而是新增一個值，如果屬性不存在則新增一項屬性值号枕。
FormData.delete()從 FormData 對象里面刪除一個鍵值對缰揪。
FormData.entries()返回一個包含所有鍵值對的iterator對象。
FormData.get() 返回在 FormData 對象中與給定鍵關聯(lián)的第一個值葱淳。
FormData.getAll()返回一個包含 FormData 對象中與給定鍵關聯(lián)的所有值的數(shù)組钝腺。
FormData.has()返回一個布爾值表明 FormData 對象是否包含某些鍵抛姑。
FormData.keys()返回一個包含所有鍵的iterator對象。
FormData.set()給 FormData 設置屬性值艳狐，如果FormData 對應的屬性值存在則覆蓋原值定硝，否則新增一項屬性值。
FormData.values()返回一個包含所有值的iterator對象毫目。
- FormData的初始化
//通過FormData()構(gòu)造函數(shù)創(chuàng)建空的formData對象
let formData = new FormData();
//通過append()方法新增屬性
formData.append('userName', 'Iron man');
//通過get()方法對值讀取屬性
console.log(formdata.get("userName"));
//通過delete()方法刪除屬性
formData.delete('userName');
//通過set()方法對值設置屬性
formdata.set("userName","鋼鐵俠");
console.log(formdata.get("userName"));
//通過form表單初始化FormData
//創(chuàng)建表單
<form id="carList">
<p>商品名稱：<input type="text" name="productName" value="耐克"></p>
<p>商品數(shù)量：<select name="productNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></p>
<p>商品價格：<select name="productPrice">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select></p>
<p><input type="button" id="payment" value="支付"></p>
</form>
//表單原生作為參數(shù)初始化FormData
<script>
//獲得表單按鈕元素
var paymentBtn = document.getElementById("payment");
//為按鈕添加點擊事件
paymentBtn.onclick=function(){
//根據(jù)ID獲得頁面當中的form表單元素
var form = document.querySelector("#carList");
//將獲得的表單元素作為參數(shù)蔬啡，對formData進行初始化
var formData = new FormData(form);
//獲取商品名稱
console.log(formData.get("productName"));//耐克
//獲取商品數(shù)量
console.log(formData.get("productNumber"));//3
//獲取商品價格
console.log(formData.get("productPrice"));//400
}
</script>
- 使用詳解
//通過append('key','value')添加新的屬性值，F(xiàn)ormData 對應的屬性值存在也不會覆蓋原值镀虐，而是新增一個值箱蟆，如果屬性不存在則新增一項屬性值
var formData = new FormData();
formData.append('userName','hhp');
formData.append('userName','li');
formData.append('age','20');
formData.append('age','30');
formData.append('gender','man')
//如果一個key寫入多個value 通過get()方法只會獲取到第一個寫入的value
console.log(formData.get("userName"));//hhp
console.log(formData.get("age"));//20
//通過getall()可以讀取當前key所有的值官硝，以數(shù)組的形式輸出
console.log(formData.getAll("userName"));//["hhp", "li"]
console.log(formData.getAll("age"));//["20", "30"]
console.log(formData.getAll("gender"));//["man"]
formData.append('gender','woman');
console.log(formData.getAll('gender'));//["man","woman"]
//通過set()方法給 FormData 設置屬性值念祭，如果FormData 對應的屬性值存在則覆蓋原值，否則新增一項屬性值珠洗。同時如果以前存在多個值都會被set進的新值覆蓋诺核。
formData.set('gender','super man');
console.log(formData.getAll('gender'));//["super man"]
//通過has()方法返回一個布爾值表明 FormData 對象是否包含某些鍵
console.log(formData.has('userName'));//true
console.log(formData.has('stature'));//false
//通過delete()方法從 FormData 對象里面刪除一個鍵值對
formData.append('stature',185);
formData.append('stature',184);
console.log(formData.get('stature'));//185
console.log(formData.getAll('stature'));//["185","184"]
//會刪除當前key下所有的值
console.log(formData.delete('stature'));//undefined
console.log(formData.getAll('stature'));//[]
console.log(formData.values());//返回當前表單數(shù)據(jù)對象所有的值
console.log(formData.entries());//
for (var ele of formData.entries()){
console.log(ele);//["userName", "hhp"]["userName", "li"]["age", "20"]["age", "30"]["gender", "super man"]
console.log(ele[0] + '==' + ele[1]);//userName==hhp userName==li age==20 age==30 gender==super man
}
- 通過XMLHttpRequest發(fā)送數(shù)據(jù)
var paymentBtn = document.getElementById("payment");
//為按鈕添加點擊事件
paymentBtn.onclick=function(){
//根據(jù)ID獲得頁面當中的form表單元素 當前元素就是上面第二條的form表單
var form = document.querySelector("#carList");
//將獲得的表單元素作為參數(shù)抄肖，對formData進行初始化
var formData = new FormData(form);
var xml = new XMLHttpRequest();
xml.open('POST', "http:172.168.0.1");
xml.send(formData);
xml.onload = function (){
console.log(xml.status);
}
}
- FormData上傳圖片
//將圖片轉(zhuǎn)為blob格式
export function getBlob(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
return new Promise((resolve, reject) => {
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
resolve(xhr.response); // 返回值
}
};
});
}
//fileFront.path圖片的臨時路徑
const fileBlob = await getBlob(fileFront.path)
const fileType = fileFront.type === 'image/png' ? '.png' : '.jpg';
const formData = new FormData();
formData.append('url','/nurse-coming-web/upload/imageUpload');
formData.append('file', fileBlob, Date.now() + fileType);
//
const front = await uploadImage(formData).then((data: any) => {
console.log(data);
})
export function uploadImage(query) {
return request({
url: `/nurse-coming-web/upload/imageUpload`,
options: {
method: 'POST',
data: query,
},
// headers: {//上傳圖片不需要主動加contenttype
// 'Content-Type': "multipart/form-data;"
// },
api: 'nurseComingApi'
});
}
-
兼容性
由于 FormData 是 Ajax 2.0 新增的接口，低于IE10 的IE瀏覽器都不支持 FormData 窖杀，IE10以上支持append方法漓摩，其他方法全不支持。
兼容性
