js文件上传以及上传时展示进度条（原生ajax）

原创

wx6409a261df68a 2023-03-15 09:41:53 博主文章分类：js ©著作权

文章标签 js文件上传以及上传时展示进度条 Data 上传 html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者wx6409a261df68a的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #bar-warp {
      width: 500px;
      height: 30px;
      border: 1px solid green;
    }

    #bar {
      width: 0px;
      height: 30px;
      background: green;
    }
  </style>
</head>

<body>
  <input type="file" name="pic" onchange="upfile();" />
  <div id="bar-warp">
    <div id="bar"></div>
  </div><span id="precent"></span><br />

  <script type="text/javascript">
    function upfile() {
      var pic = document.getElementsByTagName('input')[0].files[0];
      var fd = new FormData();//利用FormData传参
      var xhr = new XMLHttpRequest();
            //xhr.setRequestHeader('token',sessionStorage.getItem('token'))加token
      xhr.open('post', '01.php', true);
      xhr.onreadystatechange = function () {
        //readystate为4表示请求已完成并就绪
        if (this.readyState == 4) {
          document.getElementById('precent').innerHTML = this.responseText;
          //在进度条下方插入百分比
        }
      }

      xhr.upload.onprogress = function (ev) {
        //如果ev.lengthComputable为true就可以开始计算上传进度
        //上传进度 = 100* ev.loaded/ev.total
        if (ev.lengthComputable) {
          var precent = 100 * ev.loaded / ev.total;
          console.log(precent);
          //更改进度条，及百分比
          document.getElementById('bar').style.width = precent + '%';
          document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
        }
      }
      fd.append('pic', pic);//FormData传参

      xhr.send(fd);

    }
  </script>
</body>