当前位置:首页 » 《随便一记》 » 正文

什么是new FormData()

14 人参与  2024年10月07日 10:40  分类 : 《随便一记》  评论

点击全文阅读


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 对象

可以使用 XMLHttpRequestFetch 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 APIXMLHttpRequest,可以高效地进行异步数据传输。


点击全文阅读


本文链接:http://zhangshiyu.com/post/168465.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1