FormData对象

2021-10-24 本文已影响0人沃德麻鸭

1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式

2.异步上传二进制文件

1.准备HTML表单，表单中需要提交数据的表单控件必须添加name属性

2.将HTML表单转化为FormData对象，通过

var form =document.getElementById( ' form' )

var formData=new formData( form ) //接收参数可以为DOM对象的格式

3.提交表单对象

let xhr=new XMLHttpRequest();

xhr.send ( formData )

具体操作

①获取到提交表单的按钮并且给按钮添加点击事件，一旦点击就发送请求

②生成formData实例，将获取到的表单元素作为参数

③创建Ajax对象

④配置请求的方式以及地址

⑤将表单实例作为请求参数发送出去

⑥监听onload事件，当响应状态码为200时，说明请求成功，将结果打印出来即可

应用场景

①formData.get( 'key' )------用来获取表单对象的属性值，也就是输入框输入的值，key是表单的name所对应的名字

②formData.set( 'key' ,'value')------用来设置表单对象属性的值，如果设置的表单属性存在就会覆盖原有的值，如果不存在就会创建这个属性

③formData.delete( 'key' )-------删除表单对象的属性值

④formData.append( 'key' ,'value')------向表单对象中添加值，如果属性已存在，那么会保留新旧两个属性及值，但是打印的话，后面添加的会覆盖前面的

上传文件

①upload事件在上传文件的过程中持续触发，它又有一个onprogress方法

②已经上传的文件大小/文件的总大小*100+'%'-------->loaded(已经上传的文件大小）/total（文件总大小）*100+'%'

③设置一个变量用来接收进度条的值，之后将值赋值给HYML样式即可

上传进度

使用进度