作用
- FormData应用系统定制开发提供一种表示表单数据应用系统定制开发的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率
存储格式
键值对的形式，一对key/value组成一条数据，key是唯一的，一个key可以对应多个value
| key | value |
|---|---|
| key1 | [value1,value2,value3] |
| key2 | value4 |
创建方式
构建实例对象
let formData = new FormData()- 1
实例
<input type="file" id="file_name">- 1
const file = document.querySelector('#file_name').files[0]let formData = new FormData()formData.append("后台提供的键",file)- 1
- 2
- 3
$.ajax完成上传
$.ajax({ url:"", //上传地址 type:"POST", data:fromData, // 传入实例化的formData对象，此对象包含了要上传的文件 contentType:false, // 在请求服务器的时候，数据有非字符串格式的内容（文件是二进制） processData:false // formData对象不需要转换成参数字符串 })- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意：$.ajax上传文件不要忽略将contentType:false和processData:false
对象的相关常用方法
| 操作类型 | FormData对象方法语法 | 举例说明 | 结果 |
|---|---|---|---|
| 获取数据 | get(key) | formData.get(“name”); | 获取key为name的第一个值 |
| 获取数据 | getAll(key) | formData.getAll(“name”); | 返回一个数组，获取key为name的所有值 |
| 添加数据 | append(key,value) | formData.append(‘name’,‘rose’) | 添加key为name，值为rose的一组数据 |
| 修改数据 | set(key,value) | formData.set(‘name’,‘lili’) | 修改key为name的值为lili |
| 删除数据 | delete(key) | formData.delete(‘name’) | 删除key为name的所有数据 |
| 检查key是否存在 | has(key) | formData.has(‘name’) | 判断key为name是否存在 true:表示存在 false:表示不存在 |
| 遍历所有数据 | forEach | formData.forEach((value,key){ }) | 回调函数第一个参数是值，第二个是key |