Now formdata是什么?如何使用

FormData 是什么

FormData 是浏览器提供的 JavaScript 对象,用于构造表单数据格式的键值对。它主要用于发送 multipart/form-data 类型的请求,适合上传文件或提交包含二进制数据的表单。FormData 可以动态添加字段,无需手动拼接数据。

使用 FormData 的方法

创建 FormData 对象

const formData = new FormData();

添加字段 通过 append() 方法添加文本或文件数据:

formData.append('username', 'Alice');
formData.append('avatar', fileInput.files[0]); // 文件对象

从表单元素初始化 若页面有 <form> 元素,可直接传入表单 DOM 节点:

const formElement = document.querySelector('form');
const formData = new FormData(formElement);

发送 FormData 数据 通过 fetchXMLHttpRequest 发送:

// 使用 fetch
fetch('/upload', {
  method: 'POST',
  body: formData
});

// 使用 XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);

检查 FormData 内容 使用 entries() 遍历数据:

for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

注意事项

  • 无需设置 Content-Type 请求头,浏览器会自动处理为 multipart/form-data
  • 文件字段需通过 <input type="file"> 获取文件对象后添加。
  • 支持多次添加同名字段,服务器端可能接收为数组。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值