案例效果：

一、上传文件

1.定义UI结构

   <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />
  </div>

2.验证是否选择了文件

// 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
//...后续业务逻辑

)}

3.向FormDate中追加文件

var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

4.使用xhr发起上传文件的请求

      // 创建xhr对象
      var xhr = new XMLHttpRequest()
      // 调用open函数，指定请求类型与URL地址，请求类型必须为POST
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      // 发起请求
      xhr.send(fd)

5.监听onreadystatechange事件

xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功，将服务器返回的图片地址设置为<img>标签的src属性
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }

二、显示文件上传进度

1.版本的XMLHttpRequset对象中，可以通过监听xhr.upload.onprogress事件，来获取文件的上传进度

   xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
           }
    }

2.上传进度的样式我们是通过bootstrap来做的，我们要做的就是去bootstrap官网里面找到我们想要的样式，然后导入我们的文件中，在根据我们想要的来修改里面的内容

   <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
      <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
        0%
      </div>
    </div>

3.监听上传进度的事件

    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }

三、完整代码

完整html代码：

 <div class="box">
    <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>

    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
      <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
        0%
      </div>
    </div>

    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />
  </div>

完整css代码：

.box {
    margin: 50px auto;
    width: 800px;
    height: 100px;
  }

完整js代码：

<script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])
      // 创建xhr对象
      var xhr = new XMLHttpRequest()




      // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }

      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }
      // 调用open函数，指定请求类型与URL地址，请求类型必须为POST
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      // 发起请求
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功，将服务器返回的图片地址设置为<img>标签的src属性
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>

 因为代码中我们使用了jquery和bootstrap所以我们要引入两个文件

  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>