普歌-飞灵团队-Ajax基础中FormData对象

一.FormData对象的使用

1.准备HTML表单

<form id="form">
   <input type="text" name="username">
   <input type="password" name="password">
   <input type="button">
</form>

2.将HTML表单转化为formData对象

var form = focument.getElementById('form');
var formData = new FormData(form);

3.提交表单对象

xhr.send(formData);

二.FormData对象的实例方法

1.获取表单中属性的值

formData.get('key');

2.设置表单对象中属性的值

formData.set('key','value');

3.删除表单对象中属性的值

formData.delete('key');

4.向表单对象中追加属性值

formData.append('key','value');

注意：set方法与append方法的区别是，在属性名已经存在的情况下，set会覆盖已有键名的值，append会保留两个值

三.FormData二进制文件上传

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

var file = document.getElementById('file');
//当用户选择文件的时候
file.onchange = function () {
   //创建空表单对象
   var formData = new FormData();
   //将用户选择的二进制文件追加到表单对象中
   formData.append('attrName',this.files[0]);
   //配置ajax对象，请求方式必须为post
   xhr.open('post','www.example.com');
   xhr.send(formData);
}

三.FormData文件上传进度展示

//当用户选择文件的时候
file.onchange = function () {
   //文件上传过程中持续触发onprogress事件
   shr.upload.onprogress = function (ev) {
      //当前上传文件大小/文件总大小 再将结果转换为百分数
      //将结果赋值给进度条的宽度属性
      bar.style.width = (ev.loaded / ev.total) * 100 + '%';
   }
}

———————————————————————————————————————
作者：wx_mz
出处/源自：wx_mz的《普歌-飞灵团队-Ajax基础中FormData对象》

本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。