文件上传（formData使用）

作用FormData提供一种表示表单数据的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率存储格式键值对的形式，一对key/value组成一条数据，key是唯一的，一个key可以对应多个valuekeyvaluekey1[value1,value2,value3]key2value4创建方式构建实例对象let formData = new FormData()实例化对象

-小影-

11183人浏览 · 2022-01-01 23:02:57

-小影- · 2022-01-01 23:02:57 发布

作用

FormData提供一种表示表单数据的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率

存储格式

键值对的形式，一对key/value组成一条数据，key是唯一的，一个key可以对应多个value

key	value
key1	[value1,value2,value3]
key2	value4

创建方式

构建实例对象

let formData = new FormData()

实例化对象实例

<input type="file" id="file_name">

const file = document.querySelector('#file_name').files[0]
let formData = new FormData()
formData.append("后台提供的键",file)

$.ajax完成上传

$.ajax({
	url:"",  //上传地址
	type:"POST",
	data:fromData,  // 传入实例化的formData对象，此对象包含了要上传的文件
	contentType:false, // 在请求服务器的时候，数据有非字符串格式的内容（文件是二进制）
	processData:false   // formData对象不需要转换成参数字符串    
})

注意：$.ajax上传文件不要忽略将contentType:false和processData:false

FormData对象的相关常用方法

操作类型	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