前言
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是一個字串，表示上傳檔案的當前標準時間 (形同Date())name表示上傳的檔案名-
size表示檔案的位元組大小 type表示檔案型別weblitRelativePath當前為空，當在input上加上webkitdirectory屬性時，可以直接選擇目錄下所有檔案
這里演示一下weblitRelativePath：
<input id="input" type="file" webkitdirectory>
點擊按鈕會有一個彈窗提示：
點擊上傳就會上傳我的“簡歷”檔案夾下所有檔案，這時我們再在控制臺列印 input.files，得到如下結果：
可以看出weblitRelativePath表示檔案夾中檔案的相對路徑，
FileReader
雖然通過 input:file 的方式可以上傳檔案，但只能拿到檔案的描述資訊，并眉頭獲得檔案中的資料，這時就需要 FileReader 出場了
FileReader（） 回傳一個新構造的FileReader
let fr = new FileReader()
console.log(fr);
控制帶列印輸出如下：
可以看到 FileReader 物件的原型鏈上存在許多屬性、方法以及對應事件回呼，
屬性
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在讀取資料程序中周期性呼叫
以上列出 FileReader 這些屬性、方法以及對應事件，想要具體了解可以查看MDN檔案詳解
demo
下面直接上手實際例子：
讀取txt檔案內容
<!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]為第一個檔案
// onl oad：當讀取操作成功完成時呼叫
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>
參考文章：
https://www.cnblogs.com/xyyt/p/9066882.html
https://www.jianshu.com/p/42fd93f08554
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15766987.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413055.html
標籤：HTML5
上一篇：如何使用PHP7.4安裝APCu