FileReader()讀取文件、圖片上傳預(yù)覽
作者 | 不知名前端李小白
來(lái)源 | https://www.cnblogs.com/libo-web/p/15766987.html
前言
input:file
<input id="input" type="file">
輸出：
input的file類型會(huì)渲染為一個(gè)按鈕和一段文字。
點(diǎn)擊按鈕可打開文件選擇窗口，文字表示對(duì)文件的描述（大部分情況下為文件名）；
file類型的input會(huì)有files屬性，保存著文件的相關(guān)信息。
點(diǎn)擊按鈕上傳一個(gè)文件后，在控制臺(tái)打印 input.files ，如下：
由上結(jié)果可知在 input 元素選擇文件后返回了一個(gè) FileList 對(duì)象：
lastModified 表示最近一次修改時(shí)間的毫秒值
lastModifiedDate 是一個(gè)字符串，表示上傳文件的當(dāng)前標(biāo)準(zhǔn)時(shí)間 (形同 Date() )
name 表示上傳的文件名
size 表示文件的字節(jié)大小
type 表示文件類型
weblitRelativePath 當(dāng)前為空，當(dāng)在input上加上webkitdirectory屬性時(shí)，可以直接選擇目錄下所有文件
這里演示一下weblitRelativePath：
<input id="input" type="file" webkitdirectory>
點(diǎn)擊按鈕會(huì)有一個(gè)彈窗提示：
點(diǎn)擊上傳就會(huì)上傳我的“簡(jiǎn)歷”文件夾下所有文件，這時(shí)我們?cè)僭诳刂婆_(tái)打印 input.files，得到如下結(jié)果：
可以看出weblitRelativePath表示文件夾中文件的相對(duì)路徑。
FileReader
雖然通過(guò) input:file 的方式可以上傳文件，但只能拿到文件的描述信息，并眉頭獲得文件中的數(shù)據(jù)，這時(shí)就需要 FileReader 出場(chǎng)了。
FileReader（） 返回一個(gè)新構(gòu)造的FileReader。
let fr = new FileReader()console.log(fr);
控制帶打印輸出如下：
可以看到 FileReader 對(duì)象的原型鏈上存在許多屬性、方法以及對(duì)應(yīng)事件回調(diào)。
屬性
FileReader.error (只讀)：表示在讀取文件時(shí)發(fā)生的錯(cuò)誤
FileReader.readyState (只讀)：表示FileReader狀態(tài)的數(shù)字。取值如下：
| 常量名 | 值 | 描述 |
| EMPTY | 0 | 還沒(méi)有加載任何數(shù)據(jù) |
| LOADING | 1 | 數(shù)據(jù)正在被加載 |
| DONE | 2 | 已完成全部的讀取請(qǐng)求 |
FileReader.result (只讀)：文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個(gè)方法來(lái)啟動(dòng)讀取操作。
方法
FileReader.abort() 終止文件讀取操作。在返回時(shí)，readyState屬性為DONE
FileReader.readAsArrayBuffer(file) 按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對(duì)象表示
FileReader.readAsBinaryString(file) 按字節(jié)讀取文件內(nèi)容，結(jié)果為文件的二進(jìn)制串
FileReader.readAsDataURL() 讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示
FileReader.readAsText() 按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示
其中FileReader.readAsDataURL(file)和FileReader.readAsText(file,encoding)較為常用。
事件
FileReader.onabort 當(dāng)讀取操作被中止時(shí)調(diào)用
FileReader.onerror 當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用
FileReader.onload 當(dāng)讀取操作成功完成時(shí)調(diào)用
FileReader.onloadstart 當(dāng)讀取操作開始時(shí)調(diào)用
FileReader.onloadend 當(dāng)讀取操作完成時(shí)調(diào)用，無(wú)論成功或失敗
FileReader.onprogress 在讀取數(shù)據(jù)過(guò)程中周期性調(diào)用
以上列出 FileReader 這些屬性、方法以及對(duì)應(yīng)事件，想要具體了解可以查看MDN文檔詳解。
demo
下面直接上手實(shí)際例子：
讀取txt文件內(nèi)容：
<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]')// 監(jiān)聽事件input.addEventListener('change', ()=>{// 創(chuàng)建FileReader實(shí)例對(duì)象const reader = new FileReader()// 調(diào)用readAsText()方法reader.readAsText(input.files[0],'utf8') // input.files[0]為第一個(gè)文件// onload：當(dāng)讀取操作成功完成時(shí)調(diào)用reader.onload = ()=>{document.body.innerHTML += reader.result // reader.result為獲取結(jié)果}}, false)</script></body></html>
圖片上傳預(yù)覽
<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對(duì)象const reader = new FileReader()//readAsDataURL()方法：讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示reader.readAsDataURL(input.files[0]) // input.files[0]為第一個(gè)文件// 讀取成功回調(diào)reader.onload = ()=>{// 創(chuàng)建img節(jié)點(diǎn)const img = new Image()// 將讀取的文件內(nèi)容結(jié)果用data:url的字符串形式表示來(lái)賦值給img的src屬性img.src = reader.result// reader.result為獲取結(jié)果// 追加節(jié)點(diǎn)document.body.appendChild(img)}}, false)</script></body></html>
本文完~
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
