ajax上传进度处理

<!-- 设置文件域和上传按钮 -->
  <input type="file" id="ipt">
  <button id="btn">按钮</button>

  <div class="progress" style="width:500px; margin: 10px 0;">
    <div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width:0%">
      0%
    </div>
  </div>
  <script src="lib/jquery.js"></script>
  <script>
    // 按钮点击
    $('#btn').on('click', function () {
      // 获取文件内容
      var files = $('#ipt')[0].files;
      var fd = new FormData();
      fd.append('file', files[0]);
      // 设置原生ajax请求，进行上传进度设置（如果使用jQuery，直接取网上找插件即可）
      // 1 基本的ajax步骤
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
      // 2 上传进度检测
      //  - 上传中，onprogress事件会自动触发多次（具体次数不固定，取决于网速和文件大小）
      //    - 我自己测试的次数：  60k左右的图片，触发3次，   30M左右的视频，触发几十次
      xhr.upload.onprogress = function (e) {
        // - e.lengthComputable 表示是否具有可计算的文件大小
        //   - 布尔值，true表示文件可以使用
        if (e.lengthComputable) {
          // - e.total 上传文件的总大小
          // - e.loaded 已上传大小
          //   - toFixed() 保留指定位小数
          var bili = (e.loaded / e.total * 100).toFixed(2) + '%';
          // 根据上传进度，设置具体功能
          //  - 设置进度条宽度和内容为比例
          $('#percent').css('width', bili).text(bili);
        }
      };
      // 3 上传完毕，修改显示效果
      // upload.onload 事件会在上传操作完毕后触发
      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success');
      };
      xhr.send(fd);
    });
  </script>