明天小编要获得一个新技能，就是上传图片并显示进度条。 废话不多说，我们直接进入正题吧！ 去！去！去！ ！
为达到治疗效果：
点击上传文件按钮后，如果没有选择文件，会弹出提示框选择要上传的文件。 否则，将显示上传图像的进度条。 上传完成后，页面上会显示相应的图片。
实施步骤：
① 定义UI结构
② 验证文件是否被选中
③ 添加文件到FormData
④ 使用xhr发起上传文件的请求
⑤ 监听onreadystatechange请求
⑥ 显示文件上传进度
⑦ 基于bootstrap绘制进度条的效果
⑧ 监控并上传完整风暴
【接下来我会按照实现步骤一一讲解，最后会附上完整代码，请仔细阅读~】
逐步分析：①定义UI结构
首先引入相关文件，bootstrap.css和jQuery.min.js
开始布局页面的基本结构（代码如下所示）
进度条的样式是从bootstrap官网->组件->进度条购买的。
最后，给出一个Img标签来显示上传到服务器的图像。
0
② 验证文件是否被选中
首先获取上传文件的按钮并为其添加点击波
获取选中的文件列表（files）
其中 var files = document.querySelector('#file1').files
通过id获取文件选择框。 文件选择框中有一个文件属性。 它是存储用户选择的文件的字段。 判断其长度是否大于等于0，如果是，则不选择任何文件。
// 1.获取上传文件的按钮
var btn = document.querySelector('#btn')
// 2.为按钮添加 click 事件监听
btn.addEventListener('click',function(){
// 3.获取到选择的文件列表
var files = document.querySelector('#file1').files
if(files.length <= 0) {
return alert('请选择要上传的文件！')
}
}
③向FormData添加文件
Ajax操作常用于提交表单数据。为了方便表单处理，HTML5新增了一个formData对象，可以模拟表单操作。
可以通过append将文件追加到FormData中。
//1. 创建 FormData 对象
var fd = new FormData()
//2. 向 FormData 中追加文件，('自定义文件名',文件)，因为是一个数组，取第一个文件所以索引为0
fd.append('avatar',files[0])④使用xhr发起上传文件的请求
XMLHttpRequest（简称xhr）是浏览器提供的Javascript对象，通过它可以请求服务器上的数据资源
创建xhr对象后，通过调用open函数指定请求方式和URL地址
这里需要注意！ 由于您要上传文件，因此必须邮寄请求表。
调用send函数发起Ajax请求
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 post
xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)⑤ 监听onreadystatechange请求
监控xhr对象的请求状态readyState； 以及服务器的响应状态
如果xhr.readyState都等于4html5异步上传文件，xhr.status都等于200，则获取服务器响应的数据html5异步上传文件，
并将其转换为JS对象（方便后续获取上述值）并存储在自定义数据对象中
获取的数据中有很多属性，其中data.status代表上传状态。 如果是200则说明上传成功。
如果上传成功，页面会显示上传的图片。
xhr对象的readyState属性
值状态说明
未发送
