前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。
最常見的效果有 圖片上傳預覽、類型檢查、文件大小檢查。
File
File 繼承了 Blob ，可以用於任意需要 Blob 類型的方法中，比如FileReader()、URL.createObjectURL()、XMLHttpRequest.send() 這些方法。
File 對象屬性
-
lastModified返回當前 File 對象所引用文件最後修改時間，自 UNIX 時間起始值（1970年1月1日 00:00:00 UTC）以來的毫秒數。 -
name返回當前 File 對象所引用文件的名字。 -
size返回文件的大小（單位爲字節）。size/1024爲KB,size/1024/1024爲MB。 -
type返回文件類型如"image/png"
File 構造函數
file = new File(bits, name[, options]);
-
bits：
ArrayBuffer，ArrayBufferView，Blob，Array。是 UTF-8 編碼的文件內容。 - name： 表示文件名稱
- options.type： 表示將要放到文件中的內容的 MIME 類型。默認值爲 "" 。
- options.lastModified： 表示文件最後修改時間的 Unix 時間戳（毫秒）。默認值爲 Date.now()。
FileReader
Blob類型的數據，只可以通過FileReader來讀取。
讀取內容的方法都是異步，如果成功結果會放入result屬性中。
讀取方法（都是異步）
-
readAsArrayBuffer()以 ArrayBuffer 表示所讀取的文件內容
可以更方便做計算，比如加密解密 -
readAsBinaryString()以 原始二進制 表示所讀取的文件內容
很少用 -
readAsDataURL()以 data: URL格式的 Base64 字符串 表示所讀取文件的內容
常用於圖片文件，展示或其他用途 -
readAsText()以 字符串 表示所讀取的文件內容。
如果是純文本文件，使用這個即可。
事件回調
-
onabort讀取操作被中斷時觸發（FileReader.abort()） -
onerror讀取操作發生錯誤時觸發 -
onload讀取操作完成時觸發
這個時候filesReader.result中就有值了 -
onloadstart讀取操作開始時觸發 -
onloadend讀取操作結束時（要麼成功，要麼失敗）觸發 -
onprogress進度
Blob
Blob 對象表示一個不可變、原始數據的類文件對象。
Blob 表示的不一定是JavaScript原生格式的數據。
File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
實踐一下
表單選擇 input
效果傳送門
經常用在上傳文件中，我們監聽input的change事件。
通過files屬性來獲取（因爲input可以通過multiple來選擇多個文件）
粘貼
粘貼需要監聽 paste 事件，通過獲取事件的Event對象e.clipboardData.files來獲取所有的文件對象
拖拽
拖拽需要監聽drop事件，並阻止默認事件（不阻止會使用瀏覽器打開），通過獲取事件的Event對象e.dataTransfer.files來獲取所有的文件對象
總結
- File 繼承了 Blob
- Blob 只可以使用 FileReader 來讀取內容
-
input使用e.target.files來獲取 - 粘貼 使用
e.clipboardData.files來獲取 - 拖拽 使用
e.dataTransfer.files來獲取 -
FileReader獲取內容是異步的，需要監聽onload之後拿result
