FormData interface

ECMAScript：6

在 Javascript 中，可以透過 FormData 這個 interface 模擬 HTML 的 <form> 進行表單操作。

基本使用

基本範例

let formData = new FormData();

// key / value
formData.append('username', 'JohnsonLu');
formData.append('email', 'johnson4932@gmail.com');

// 加入檔案
// 利用 Blob 代入檔案（使用 FileReader 讀取時適用）
let content = '<a id="a"><b id="b">hey!</b></a>';
let blob = new Blob([content], {type: 'text/xml'});
formData.append('file', blob, 'filename');

// 加入檔案
// <input id="myfile" type="file">
formData.append('file2', document.getElementById('myfile').files[0]);

// POST
let request = new XMLHttpRequest();
request.open('POST', '/test');
request.send(formData);

也可以搭配 <form> 直接代入：
範例

let formElement = document.querySelector('form');

// POST
let request = new XMLHttpRequest();
request.open('POST', 'test.php');
request.send(new FormData(formElement));