FormData 上传

FormData 对象的作用

• 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
• 异步上传二进制文件

formData 对象的使用

1、准备 HTML 表单

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

var form = document.getElementById("form")
var btn =  document.getElementById("btn")
btn.onclick = function(){
//  讲普通的 HTML 表单转坏为 表单对象
	 var  formData  =  new FormData (form);
	// 创建ajax 对象
	var  xhr = new XMLHttpRequest();
	// 对ajax对象进行配置
	xhr.open("post"," 地址")
	xhr.send(formData )
	// 监听 xhr 对象 下面 的 onlod 事件
	xhr,onload = function () {
			// 对象http 状态码 进行判断
			if (xhr.status == 200 ) {
}
	}
}

实例方法

formData 对象的实例方法 操作的是name的值
注意： set 方法和 append 方法的区别是 在属性已经存在的情况 下 set 会覆盖已有的值 append 会保留两个值

1、获取表单对象中的值

formData.get("key")

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

formData.set("key" ，“value”)

3、删除表单表单对象属性的值

formData.delete("key")

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

formData.append("key","value") 

FormData 二进制文件上传

<input type ="file" id ="file"/>
var file = document.getElmentByid('file')
// 当用户选择文件的时候
file.onchang =  function () {
	// 将用户选择的二进制文件追加到表单对象中
	formData.append("attrName",this.files[0]);
	// 配置 ajax对象  请求方式必须为 post 
	xhr.open("post","www.example.com");
}

formData 文件上传进度展示

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

}

FormData 文件上传图片即时预览

在我们将图片上传到服务端以后 服务端通常会将图片地址作为响应数据传递到客户端，客户端可以从相应数据中获取图片地址，然后将图片再展示在页面中