当前位置: 首页 > 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.lqws.cn/news/204139.html

相关文章:

  • Xilinx IP 解析之 Block Memory Generator v8.4 ——02-如何配置 IP(仅 Native 接口)
  • 六大设计原则
  • 2024 CKA题库+详尽解析| 15、备份还原Etcd
  • iframe(概念、简单例子、在vue项目中的使用)
  • VScode 使用 git 提交数据到指定库的完整指南
  • 设计一个算法:删除非空单链表L中结点值为x的第一个结点的前驱结点
  • 第23讲、Odoo18 邮件系统整体架构
  • 项目-- Json-Rpc框架
  • Qt学习及使用_第1部分_认识Qt---学习目的及技术准备
  • 如何判断当前web页面是在钉钉内部打开的?
  • 使用柏林噪声生成随机地图
  • C++调试(肆):WinDBG分析Dump文件汇总
  • 新能源汽车热管理核心技术解析:冬季续航提升40%的行业方案
  • LangChain面试内容整理-知识点1:LangChain架构与核心理念
  • 征文投稿:如何写一份实用的技术文档?——以软件配置为例
  • python打卡day47
  • 【MATLAB代码】基于MCC(最大相关熵)的EKF,一维滤波,用于解决观测噪声的异常|附完整代码,订阅专栏后可直接查看
  • FreeRTOS任务之深入篇
  • 打印高质量日志的10条军规
  • 【Java学习笔记】Math方法
  • 2023年12月6级第三套第二篇
  • Flask与Celery 项目应用(shared_task使用)
  • CppCon 2015 学习:Intro to the C++ Object Model
  • 使用WPF的Microsoft.Xaml.Behaviors.Wpf中通用 UI 元素事件
  • 【计算机组成原理】计算机硬件的基本组成、详细结构、工作原理
  • 前端杂货铺——TodoList
  • MySql数据库入门到精通——关系数据库标准语言SQL
  • 零基础玩转物联网-串口转以太网模块如何快速实现与TCP服务器通信
  • python版若依框架开发:后端开发规范
  • Android 平台RTSP/RTMP播放器SDK接入说明