new FormData()
new FormData()
是一个 Web API,用于创建一个表示 HTML 表单数据的对象,方便在使用 XMLHttpRequest 或 Fetch API 进行异步请求时发送表单数据。FormData 对象可以方便地处理文件上传和其他复杂的表单数据操作。下面是详细的解释和使用示例:
基本用法
FormData
构造函数可以创建一个空的 FormData
对象或从现有的 <form>
元素中提取数据来初始化。
创建空的 FormData 对象
let formData = new FormData();
从表单元素创建 FormData 对象
<form id="myForm"> <input type="text" name="username" value="JohnDoe"> <input type="file" name="profilePic"></form><script> let form = document.getElementById('myForm'); let formData = new FormData(form);</script>
常用方法
FormData
对象提供了一些方法来操作数据:
append()
用于向 FormData 对象添加一个键值对。如果键已经存在,则追加新的值。
formData.append('username', 'JohnDoe');formData.append('profilePic', fileInput.files[0]); // 假设 fileInput 是一个 <input type="file"> 元素
set()
用于设置一个键值对。如果键已经存在,则覆盖其值。
formData.set('username', 'JaneDoe');
delete()
用于删除指定的键及其对应的值。
formData.delete('username');
get()
用于获取指定键的第一个值。
let username = formData.get('username');
getAll()
用于获取指定键的所有值。
let allUsernames = formData.getAll('username');
has()
用于检查 FormData 对象中是否存在指定的键。
let hasUsername = formData.has('username');
entries()
返回一个迭代器,可以用来遍历 FormData 对象中的所有键值对。
for (let pair of formData.entries()) { console.log(pair[0] + ': ' + pair[1]);}
发送 FormData 对象
可以使用 XMLHttpRequest
或 Fetch API
来发送 FormData
对象。下面是一个使用 Fetch API
的示例:
fetch('https://example.com/api/upload', { method: 'POST', body: formData}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
实际示例
假设你有一个 HTML 表单,需要上传文件和其他数据:
<form id="uploadForm"> <input type="text" name="username" value="JohnDoe"> <input type="file" name="profilePic"> <button type="submit">Upload</button></form>
你可以使用以下 JavaScript 代码来处理表单提交并使用 FormData
对象发送数据:
document.getElementById('uploadForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 let form = document.getElementById('uploadForm'); let formData = new FormData(form); fetch('https://example.com/api/upload', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));});
总结
FormData
对象是处理表单数据,特别是文件上传时非常有用的工具。它简化了构建和发送复杂表单数据的过程,提供了多种方法来操作数据。在实际开发中,结合 Fetch API
或 XMLHttpRequest
,可以高效地进行异步数据传输。