一、FormData对象的作用
a、模拟HTML表单,相当于将HTML表单映射为表单对象,自动将表单对象中的数据拼接成请求参数的格式
b、异步上传二进制文件(比如图片、视频和音频)
FormData对象与ajax有关
FormData对象不能用于get请求
二、FormData对象的使用
1、映射表单对象
a、准备表单
<!--要有name属性,在表单提交时,将表单内容传递给服务器端-->
<form id="form">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="button" id="btn" value="提交"/>
</form>
b、将HTML表单转化为FormData对象
var form=document.getElementById('form')
var formData=new FormData(form)
//FormData构造函数接受表单对象作为参数,构造函数会自动将表单控件中的数据拼接成请求参数所需的格式
c、提交表单对象
var btn=document.getElementById('btn')
var form=document.getElementById('form')
btn.onclick=function(){
var formData=new FormData(form)
//创建ajax对象
var xhr=new XMLHttpRequest();
//对ajax对象进行配置
xhr.open('post','http://localhost:3000/formData')
//发送ajax请求
xhr.send(formData)
//监听xhr对象下面的onload事件
xhr.onload=function(){
if(xhr.status==200){
console.log(xhr.responseText)
}
}
}
2、二进制文件上传
<input type="file" id="file">
<div class="progress-bar" style="width:0%;" id="bar"></div>
var file=document.getElementById
var bar=document.getElementById('bar')
file.onchange=function(){
//创建空的表单对象
var formData=new FormData()
//将用户选择的二进制文件追加到表单对象中
//第一个参数一般是服务器端定义好的;第二个参数是文件数据
formData.append('attrName',this.files[0])
//创建ajax对象
var xhr=new XMLHttpRequest();
//对ajax对象进行配置
xhr.open('post','http://localhost:3000/formData')
//在文件上传的过程中持续触发
xhr.upload.onprogress=function(event){
var result=(event.loaded/event.total)*100+'%';
bar.style.width=result
}
//发送ajax请求
xhr.send(formData)
}
三、FormData对象的方法
1、获取表单对象中属性的值
formData.get(key)
2、设置表单对象中属性的值
//有key的话,重新赋值;没有key的话,创建key
formData.set(key,value)
3、删除表单对象中属性的值
formData.delete(key)
4、向表单对象中追加属性值
formData.append(key,value)
//给空表单对象中追加属性值
var formData=new FormData()
formData.append(key,value)
注:set和append方法的区别:在属性名已经存在的情况下,set会覆盖已有属性的值,而append会保留两个值