HTML5 – FileReader文件读取

简介

FileReader 提供多种文件读取的方式，其中比较重点的是 readAsText 、readAsBinaryString 、和 readAsDataURL

readAsText()

读取文本文牲，可以使用txt打开的文件，返回文本字符串，默认编码是 UTF-8

<input type="file" id="file" multiple onchange="fileChange();">

function fileChange(){
  const reader = new FileReader()
  const file = document.querySelector('#file').files
  reader.readAsText(file[0])
  reader.onload = function(){
   console.log(reader.result)
  }
 }

代码使用解析

1.创建文件读取对象

const reader = new FileReader()

2.读取文件，获取Text ，input 框中如果设置了 type="file"  时，当用户浏览打开文件时，我们可以通过 input.files 获取打开文件的数组，之所以叫 files 是因为，input file  框支持 multiple 打开多个文件。

const file = document.querySelector('#file').files

3.使用 readAsText 读取文件 txt 内容，读取数组中第一个文件

reader.readAsText(file[0])

注意：readAsText()方法是没有返回值的，而读取出来的数据，则存到 reader.result  属性中。

4.系统读取文件使用的异步读取，如果用同步执行的话，会输不出任何东西，或输出东西不全。

FileReader 提供几个生命周期，可以调用它来待文件读取完成后再输出，生命周期分别为

reader.onabort : 读取文件中断时触发

reader.onerror : 读取错误时触发

reader.onload : 文件读取成功完成时触发

reader.onloadend : 读取完成时触发，无论成功还是失败

reader.onloadstart : 开始读取时触发

reader.onprogress : 读取文件过程中持续触发

5.使用 onload 生命周期待文件读取完毕后输出

reader.onload = function(){
  console.log(reader.result)
}

读取数据在  reader.result  属性中

readAsBinaryString()

读取任意类型的文件，返回二进制字符串。这个方法不是用来读取文件展示给用户看的，而是存储文件。

例如:读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储

 function fileChange(){
  const reader = new FileReader()
  const file = document.querySelector('#file').files
  reader.readAsBinaryString(file[0])
  reader.onload = function(){
   console.log(reader.result)
  }
 }

详细处理请看 readAsText 的操作流程。

readAsDataURL()

读取文件获取一段以 data 开头的字符串，这段字符串的本质就是DataURL

DataURL 是一种将文件（这个文件一般就是指图像或者能够嵌入到文档的文件格式）嵌入到文档的方案。

DataURL 是将资源转换为 base64 编码的字符串形式，并且将这些内容直接存储在url 中，以优化网站的加载速度和执行效率

function fileChange(){
  const reader = new FileReader()
  const file = document.querySelector('#file').files
  reader.readAsDataURL(file[0])
  reader.onload = function(){
   console.log(reader.result)
  }
 }

详细处理请看 readAsText 的操作流程。

abort()

中断读取操作，会触发 reader.onabort方法

reader.abort()