前端培訓-中級階段（20）-文件API（FileReader）（2019-10-10期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

最多見的效果有 圖片上傳預覽、類型檢查、文件大小檢查。

File

File 繼承了 Blob ，能夠用於任意須要 Blob 類型的方法中，好比FileReader()、URL.createObjectURL()、XMLHttpRequest.send() 這些方法。

File 對象屬性

1. lastModified 返回當前 File 對象所引用文件最後修改時間，自 UNIX 時間起始值（1970年1月1日 00:00:00 UTC）以來的毫秒數。
2. name 返回當前 File 對象所引用文件的名字。
3. size 返回文件的大小（單位爲字節）。size/1024 爲KB,size/1024/1024 爲MB。
4. type 返回文件類型如 "image/png"

File 構造函數

file = new File(bits, name[, options]);

1. bits： ArrayBuffer，ArrayBufferView，Blob，Array。是 UTF-8 編碼的文件內容。
2. name： 表示文件名稱
3. options.type： 表示將要放到文件中的內容的 MIME 類型。默認值爲 "" 。
4. options.lastModified： 表示文件最後修改時間的 Unix 時間戳（毫秒）。默認值爲 Date.now()。

FileReader

Blob類型的數據，只能夠經過FileReader來讀取。
讀取內容的方法都是異步，若是成功結果會放入result屬性中。

讀取方法（都是異步）

1. readAsArrayBuffer() 以 ArrayBuffer 表示所讀取的文件內容
   能夠更方便作計算，好比加密解密
2. readAsBinaryString() 以 原始二進制 表示所讀取的文件內容
   不多用
3. readAsDataURL() 以 data: URL格式的 Base64 字符串 表示所讀取文件的內容
   經常使用於圖片文件，展現或其餘用途
4. readAsText() 以 字符串 表示所讀取的文件內容。
   若是是純文本文件，使用這個便可。

事件回調

1. onabort 讀取操做被中斷時觸發（FileReader.abort()）
2. onerror 讀取操做發生錯誤時觸發
3. onload 讀取操做完成時觸發
   這個時候 filesReader.result 中就有值了
4. onloadstart 讀取操做開始時觸發
5. onloadend 讀取操做結束時（要麼成功，要麼失敗）觸發
6. onprogress 進度

Blob

Blob 對象表示一個不可變、原始數據的類文件對象。
Blob 表示的不必定是JavaScript原生格式的數據。
File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。

實踐一下

表單選擇 input

效果傳送門
常常用在上傳文件中，咱們監聽input的change事件。
經過files屬性來獲取（由於input能夠經過multiple來選擇多個文件）

粘貼

粘貼須要監聽 paste 事件，經過獲取事件的Event對象e.clipboardData.files來獲取全部的文件對象

拖拽

拖拽須要監聽drop事件，並阻止默認事件（不阻止會使用瀏覽器打開），經過獲取事件的Event對象e.dataTransfer.files來獲取全部的文件對象

總結

1. File 繼承了 Blob
2. Blob 只可使用 FileReader 來讀取內容
3. input 使用 e.target.files來獲取
4. 粘貼 使用 e.clipboardData.files 來獲取
5. 拖拽 使用 e.dataTransfer.files 來獲取
6. FileReader 獲取內容是異步的，須要監聽onload以後拿result

微信公衆號：前端linong