JavaScript 之 FormData物件
阿新 • • 發佈：2018-11-27
摘要 通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後臺。這用jQuery的方法來說，就是serialize。但當我們使用Ajax提交時，這過程就要變成人工的了。因此，FormData物件的出現可以減少我們一些工作量。
想得到一個FormData物件：
var formdata = new FormData(); |
W3c草案提供了三種方案來獲取或修改FormData。
方案1：建立一個空的FormData物件，然後再用append方法逐個新增鍵值對：
var formdata = new FormData(); |
formdata.append("name", "呵呵"); |
formdata.append("url", "http://www.baidu.com/"); |
方案2：取得form元素物件，將它作為引數傳入FormData物件中！
var formobj = document.getElementById("form"); |
var formdata = new FormData(formobj); |
方案3：利用form元素物件的getFormData方法生成它！
var formobj = document.getElementById("form"); |
var formdata = formobj.getFormData() |
利用Formdata物件，我們可以使用原生js通過ajax實現非同步上傳圖片，當然，現在已經有jquery的批量上傳外掛了，實現原理就是利用了Formdata。
具體例項1：
var $element=$("#form"); //獲得表單物件
var formData=$element.getFormData() //序列化表單物件
或者 var formData=new FormData($element); //序列化表單物件
formData.append('name','張三')； //還可以向表單資料里加額外資料
formData.append('sex','男')；
ajax提交
$.ajax({
url:'test';
data:formData;
})
具體例項2：
使用 MultipartFile 結合 （formData物件、Blob物件） 實現圖片上傳功能簡介
FormData 相關方法原始碼：
interface FormData {
append(name: string, value: string | Blob, fileName?: string): void;
delete(name: string): void;
get(name: string): FormDataEntryValue | null;
getAll(name: string): FormDataEntryValue[];
has(name: string): boolean;
set(name: string, value: string | Blob, fileName?: string): void;
}
來源於：
https://blog.csdn.net/baicp3/article/details/45287547
https://blog.csdn.net/csdnzhangtao5/article/details/53184858