FileReader

FileReader API用于读取文件，即把文件内容读入内存。它的参数是File对象或Blob对象。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

(1)readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
(2)readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
(3)readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
(4)readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。

readAsDataURL 例子
<input type="file"></input>

var input = document.querySelector("input[type=file]");
        input.addEventListener('change', function () {
            console.log(input.files)
            //拿到第一个文件
            var firstFile = input.files[0];
            const reader = new FileReader();
            // 把本地文件转成url
            reader.readAsDataURL(firstFile)
            // reader.readAsArrayBuffer(firstFile)
            //通过onload 方法拿到url 文件大会有一个等待过程
            reader.onload = () => {
                var img = new Image()
                img.src = reader.result
                // console.log(reader.result)
                document.body.appendChild(img)
                console.log(reader.result)
            }
        })
读取txt文件
<script>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    const reader = new FileReader()
    reader.readAsText(input.files[0],'utf8') 
    reader.onload = ()=>{
      document.body.innerHTML += reader.result  
    }
  }, false)
  </script>