js之FileReader 读取txt文件内容

柔情只为你懂 2022-11-10 01:24 373阅读 0赞

const reader = new FileReader()
          reader.readAsText(files[0],'utf8') // input.files[0]为第一个文件
          reader.onload = ()=>{
           console.log(reader.result)   // reader.result为获取结果
          }

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

属性：

*  FileReader.error 表示在读取文件时发生的错误
 *  FileReader.readyState
 *  FilerReader.result 读取到的结果

--------------------

# 下面开始实际例子 #

`index.html`如下

<!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>FileReader</title>
    </head>
    <body>
      <input id="input" type="file">
    </body>
    </html>

`demo.txt`如下

this is a demo test
    hello world

## 读取txt文件 ##

## 读取图片文件 ##

作者：Yokiijay  
链接：https://www.jianshu.com/p/42fd93f08554  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[File]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FFile
[Blob]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FBlob