读取文件进度条

读取文件进度条

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fileReader</title>
</head>

<body>
  <input type="file" multiple>
  <progress max="100" min="100" value="0"></progress>

    <script>
      const fileBtn = document.querySelector('input[type="file"]');
      const progress = document.querySelector('progress');


      fileBtn.addEventListener('change', function (e) {
        let file = this.files[0];
        let fileReader = new FileReader();
        let total = 0;

        fileReader.readAsDataURL(file); //文件转化为 Base64

        fileReader.onloadstart = function (e) {
          total = e.total;//文件总大小
        }

        fileReader.onprogress = function (e) {//加载中持续触发
          console.log(e.loaded)//已加载大小
          progress.value = e.loaded / total * 100;
        }

        fileReader.onload = function() {
          //为了保证安全，建议每次上传结束要清理input文件  
          //清楚方法：在上传等操作回调中把file input的 类型进行一次切换 用于清空里面的files存留
          //一般不放在onload里面，一般用于ajax上传表单，回调完成时再清空。
          //如果不清除，当多次提交时，后面重新选择的提交文件，提交时有可能还是上一次选择的文件，用于防范此类bug。
          fileBtn.files = null
          fileBtn.type = 'text'
          fileBtn.type = 'file'
        }

      }, false);
    </script>
</body>

</html>