FileReader()讀取文件、圖片上傳預覽
前言
FileReader 對象允許Web應用程式非同步讀取存儲在用戶電腦上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
其中File對象可以是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。
這裡我就以 input 和 DataTransfer 兩個方式來講解 FileReader 對象的使用~~~
input:file
<input id="input" type="file">
輸出：
- input的file類型會渲染為一個按鈕和一段文字。
- 點擊按鈕可打開文件選擇窗口，文字表示對文件的描述（大部分情況下為文件名）；
- file類型的input會有files屬性，保存著文件的相關資訊。
點擊按鈕上傳一個文件後，在控制台列印 input.files ，如下：
由上結果可知在 input 元素選擇文件後返回了一個 FileList 對象：
lastModified表示最近一次修改時間的毫秒值lastModifiedDate是一個字元串，表示上傳文件的當前標準時間 (形同 )- 表示上傳的文件名
- 表示文件的位元組大小
- 表示文件類型
- 當前為空，當在input上加上webkitdirectory屬性時，可以直接選擇目錄下所有文件
這裡演示一下
<input id="input" type="file" webkitdirectory>
點擊按鈕會有一個彈窗提示：
點擊上傳就會上傳我的「簡歷」文件夾下所有文件，這時我們再在控制台列印 input.files，得到如下結果：
可以看出weblitRelativePath表示文件夾中文件的相對路徑。
FileReader
雖然通過 input:file 的方式可以上傳文件，但只能拿到文件的描述資訊，並眉頭獲得文件中的數據，這時就需要 出場了
返回一個新構造的FileReader
let fr = new FileReader()
console.log(fr);
控制帶列印輸出如下：
可以看到
屬性
FileReader.error(只讀)：表示在讀取文件時發生的錯誤FileReader.readyState(只讀)：表示FileReader狀態的數字。取值如下：
| 常量名 | 值 | 描述 |
| EMPTY | 0 | 還沒有載入任何數據 |
| LOADING | 1 | 數據正在被載入 |
| DONE | 2 | 已完成全部的讀取請求 |
FileReader.result(只讀)：文件的內容。該屬性僅在讀取操作完成後才有效，數據的格式取決於使用哪個方法來啟動讀取操作。
方法
-
FileReader.abort()終止文件讀取操作。在返回時，readyState屬性為DONE -
FileReader.readAsArrayBuffer(file)按位元組讀取文件內容，結果用ArrayBuffer對象表示 FileReader.readAsBinaryString(file)按位元組讀取文件內容，結果為文件的二進位串-
FileReader.readAsDataURL()讀取文件內容，結果用data:url的字元串形式表示 -
FileReader.readAsText()按字元讀取文件內容，結果用字元串形式表示
其中FileReader.readAsDataURL(file)和FileReader.readAsText(file,encoding)較為常用
事件
FileReader.onabort當讀取操作被中止時調用FileReader.onerror當讀取操作發生錯誤時調用FileReader.onload當讀取操作成功完成時調用-
FileReader.onloadstart當讀取操作開始時調用 -
FileReader.onloadend當讀取操作完成時調用，無論成功或失敗 -
FileReader.onprogress在讀取數據過程中周期性調用
以上列出
<!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">
<script>
// 獲取元素
const input = document.querySelector('input[type=file]')
// 監聽事件
input.addEventListener('change', ()=>{
// 創建FileReader實例對象
const reader = new FileReader()
// 調用readAsText()方法
reader.readAsText(input.files[0],'utf8') // input.files[0]為第一個文件
// onload：當讀取操作成功完成時調用
reader.onload = ()=>{
document.body.innerHTML += reader.result // reader.result為獲取結果
}
}, false)
</script>
</body>
</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">
<script>
const input = document.querySelector('input[type=file]')
input.addEventListener('change', ()=>{
console.log( input.files ) //上傳文件FileList對象
const reader = new FileReader()
//readAsDataURL()方法： 讀取文件內容，結果用data:url的字元串形式表示
reader.readAsDataURL(input.files[0]) // input.files[0]為第一個文件
// 讀取成功回調
reader.onload = ()=>{
// 創建img節點
const img = new Image()
// 將讀取的文件內容結果用data:url的字元串形式表示來賦值給img的src屬性
img.src = reader.result// reader.result為獲取結果
// 追加節點
document.body.appendChild(img)
}
}, false)
</script>
</body>
</html>
參考文章：
//www.cnblogs.com/xyyt/p/9066882.html
//www.jianshu.com/p/42fd93f08554
//developer.mozilla.org/zh-CN/docs/Web/API/FileReader
