FormData对象的使用

一、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会保留两个值