【Ajax 03】Ajax笔记--FormData表单对象

FormData

B站–省、市、区

方法参数作用FormData1、将html表单映射为表单对象2、可以实现异步上传二进制文件 <!--html表单--> <form id="form"> <input type="text" name = "username"/> <input type="password" name = "password"/> <input type="button"/> </form> //将html表单转换成一个表单对象 var form = document.getElementById('form'); var formData = new FormData(form); xhr.send(formData);

可以直接放在Ajax下的send（）中

FormData不能用于get请求，因为它只能放在send（）中

‘

---

FormData.

方法一:formdata.get(‘key’)

1. 获取表单对象中的值 console.log(formData.get('username'))

输出结果：zhangsan

---

方法二:formdata.set(‘key’,‘value’)

1. 改变表单对象中某一个属性的值 2. 如果存在则改变 3. 如果不存在则新建

---

方法三:formdata.delete(‘key’)

1. 删除表单中给的属性

方法四:formdata.append(‘key’,‘value’)

1. 在表单对象中追加值 2. 与set的区别：<font size=4 color=#ff88>set有则改变无则追加，而append可以保留两个</font>

---

FormData二进制文件上传

var file = document.getElementById('file') //当用户选择文件的时候 file.onchange = function(){ //创建空表单对象 var formData = new FormData(); //将用户选择的二进制文件追加到表单对象中去 //第一个参数是数据的属性名称，第二个参数是具体要追加的数据 formData.append('attrName',this.files[0]) }

file[0]是一个集合，即使只选择一个对象也是一个集合 form.uploadDir = path.join()

在请求的过程中持续触发

xhr.upload.onprogress = function(ev){ //console.log(ev); //没上传一点点文件，触发一次 onprogress //ev.loaded 文件已经上传了多少 //ev.total 文件总共的大小 }