FormData

1、作用

AJAX 上传文件(图片等)

2、创建对象

var formData = new FormData();

3、添加键值对(name value) form表单

formData.append('k1', 'v1');

4、获取value

formData.get("k1")

5、设置value

formData.set('k1', 'v5');

6、判断是否有key

formData.has('k1')

7、删除key

formData.delete('k1')

参考链接:

https://www.jianshu.com/p/e984c3619019

转载于:https://www.cnblogs.com/wt7018/p/11318893.html

<think>我们正在讨论如何使用FormData对象进行表单数据收集和提交。根据引用[1]和[2],我们可以知道FormData是JavaScript中用于处理表单数据的API,它可以直接从表单元素创建,也可以手动添加数据,并且支持文件上传。同时,引用[3]提到了在Spring MVC中处理嵌套表单数据,但用户的问题主要集中在前端部分。 用户的问题:如何在前端使用FormData对象进行表单数据收集和提交? 回答步骤: 1. 创建FormData对象:可以从表单元素创建,也可以手动创建并添加数据。 2. 添加数据:可以通过append方法添加额外的数据。 3. 提交数据:使用fetch或XMLHttpRequest发送FormData对象。 注意:引用[1]提供了FormData的基本用法,引用[2]展示了表单的HTML结构,我们可以结合两者。 另外,用户要求使用中文回答,并且按照系统级指令处理数学表达式(但本问题不涉及数学表达式,所以可以忽略),同时需要生成相关问题。 回答结构: - 先介绍FormData的基本概念和用途。 - 分步骤说明如何收集表单数据(包括从表单创建和手动添加)。 - 分步骤说明如何提交数据(使用fetch示例)。 - 简要比较FormData和JSON格式(根据引用[1]中的比较表,但用户主要问操作,所以简单提及即可)。 - 最后生成相关问题。 由于引用[3]是关于后端处理嵌套表单的,与用户问题关系不大,可以忽略。 下面开始组织回答:</think>### 如何使用 FormData 对象进行表单数据收集和提交 #### 一、FormData 基础操作 1. **从表单创建 FormData 对象** 通过 `querySelector` 获取表单元素,直接生成 FormData 对象: ```javascript const form = document.querySelector('#myForm'); // 获取表单元素 const formData = new FormData(form); // 自动收集所有带 name 属性的表单控件 ``` 2. **手动添加数据** 使用 `append()` 方法添加额外字段(支持文本/文件): ```javascript formData.append('timestamp', Date.now()); // 文本数据 formData.append('avatar', fileInput.files[0]); // 文件数据 ``` 3. **操作表单数据** - 获取值:`formData.get('username')` - 删除字段:`formData.delete('temp_field')` - 检查存在:`formData.has('email')` #### 二、提交表单数据 使用 `fetch` 发送数据(支持文件上传): ```javascript fetch('/api/submit', { method: 'POST', body: formData // 自动设置 Content-Type 为 multipart/form-data }) .then(response => response.json()) .catch(error => console.error('提交失败', error)); ``` #### 三、特殊场景处理 1. **动态表单字段** 循环添加多个字段: ```javascript const tags = ['js', 'web', 'api']; tags.forEach(tag => formData.append('tags[]', tag)); // 后端接收数组 ``` 2. **文件上传** ```html <input type="file" id="doc" name="document" multiple> <!-- 多文件选择 --> ``` ```javascript const files = document.getElementById('doc').files; Array.from(files).forEach(file => formData.append('docs', file)); ``` 3. **嵌套数据结构** 需后端配合解析(如 Spring MVC 的 `@ModelAttribute`): ```javascript formData.append('user.profile.bio', '前端开发者'); // 点语法表示嵌套 ``` #### 四、与 JSON 提交对比 | 特性 | FormData | JSON | |---------------|------------------------------|---------------------| | 文件支持 | ✅ 原生 | ❌ 需 Base64 编码 | | 内容类型 | `multipart/form-data` | `application/json` | | 数据结构 | 扁平键值对 | 复杂嵌套结构 | | 编码效率 | 更高(二进制直接传输) | 较低(文本编码) | > 优先选择 FormData 的场景:包含文件上传、需要兼容旧表单、简化数据编码流程[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值