DAY15 - 处理/读取档案不可或缺的FileReader

前几天，我们已经认识了跟档案相关的物件，包含:Blob, File, FileList, arryBuffer等。那接下来就可以开始看各种应用罗！

在开始进行应用前我们要先认识FileReader

FileReader

FileReader是HTML5中的javascript新物件。可以非同步的方式，读取储存本地端的档案内容，读取的格式可以是File或Blob。

看一下FileReader这个物件包含哪些属性、方法和事件，我们大概就会有概念要怎麽使用

可以依照功能大概分类为

01. 读取文件的『状态』

1-1 属性

• error: 当文件读取有错误时显示的错误讯息
• readyStatue:档案读取的状态，呈现为数字：0,1,2
  • 0 - EMPTY 没有档案读入
  • 1 - LOADING: 正在读入档案
  • 2 - DONE: 档案读取完成
  • 上图的绿框框底下其实就有这些状态

1-2 事件

• onabort : 档案读取被中断时触发
• onerror : 档案读取发生错误时触发
• onload : 档案读取完成时触发
• onloadstart: 档案开始读取时触发
• onloadend: 每一次的档案读取结束後触发(成功失败都会)。在 onload or onerror之後
• onprogress： 读取Blob内容时触发

02. 读取文件的『方法』

这边是档案读取的时候可以用的不同方法，包含可以用不同的格式读取。

方法

• abort() ： 中断目前的读取，呼叫後，readyState会是DONE
• readAsArrayBuffer() : 以ArrayBuffer物件读入档案内容
• readAsBinaryString() ： 以字串型式来表示读入的原始二进位资料（raw binary data）
• readAsDataURL()：以dataURI格式（base64）读入档案内容
• readAsText():以文字字串型式读入档案内容

小结一下关於开始正式进入档案处理应用的关系图

1. 我们透过input file获取档案，可以转换成File Object，而File Object是继承Blob而来。
2. 取得档案内容的方式可以使用 FileReader 或是 CreateObjectURL。两者不同之处是：createObjectURL只是指向本地端档案位置，显示出档案；而FileReader是真的去读取档案的内容，因此读取的速度会受到档案的大小影响，也会不同格式的读取方式Ex. readArrayBuffer, readAsDataURL...

作了好多前置准备，备齐材料後，我们明天就可以开始烧菜啦！就是明天！我们正式进到档案处理的应用～～～