当前位置: 首页 > news >正文

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"> 获取文件对象后添加。
  • 支持多次添加同名字段,服务器端可能接收为数组。
http://www.xdnf.cn/news/918577.html

相关文章:

  • RT-Thread内核组成——内核移植
  • MySQL(61)如何进行数据库分区?
  • 锁的艺术:深入浅出讲解乐观锁与悲观锁
  • 计算机操作系统(十五)死锁的概念与死锁的处理方法
  • 【高效开发工具系列】Blackmagic Disk Speed Test for Mac:专业硬盘测速工具
  • Qt6.8编译MySQL
  • Fullstack 面试复习笔记:HTML / CSS 基础梳理
  • 【物联网-ModBus-ASCII】
  • vue3项目怎么适配不同尺寸的屏幕?
  • 计算机组成与体系结构:补码数制二(Complementary Number Systems)
  • FFmpeg 实现 100 台设备同屏的高效码流压缩
  • Python-进程
  • Playwright自动化测试全栈指南:从基础到企业级实践(2025终极版)
  • 柯尼卡美能达Konica Minolta bizhub 205i打印机信息
  • 线程池封装
  • ubuntu 22.04虚拟机配置静态IP
  • springBoot 通过模板导出Excel文档的实现
  • 几种简单的排序算法(C语言)
  • clickhouse 和 influxdb 选型
  • 【Android】浅析View.post()
  • rec_pphgnetv2完整代码学习(二)
  • 机器学习监督学习实战五:六种算法对声呐回波信号进行分类
  • [yolov11改进系列]基于yolov11引入轻量级下采样ContextGuided的python源码+训练源码
  • VBA之Word应用第三章第十节:文档Document对象的方法(三)
  • LeetCode--24.两两交换链表中的结点
  • Android USB 通信开发
  • 数组名作为函数参数详解 —— 指针退化及遍历应用示例
  • Oracle中的异常处理与自定义异常
  • Redis 与 MySQL 数据一致性保障方案
  • Ctrl-Crash 助力交通安全:可控生成逼真车祸视频,防患于未然