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 文件上传图片即时预览

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