HTML5進(jìn)階FileReader的使用

FileReader 對(duì)象FileReader 對(duì)象主要用來(lái)把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。通過(guò)構(gòu)造函數(shù)創(chuàng)建一個(gè) FileReader 對(duì)象。

這個(gè)文件讀取對(duì)象有以下幾種方法：

1.readAsText():讀取文本文件(可以使用Txt打開(kāi)的文件)，返回文本字符串，默認(rèn)編碼是UTF-8。

2.readAsBinaryString():讀取任意類型的文件。返回二進(jìn)制字符串。這個(gè)方法不是用來(lái)讀取文件展示給用戶看，而是存儲(chǔ)文件。例如：讀取文件的內(nèi)容，獲取二進(jìn)制數(shù)據(jù)，傳遞給后臺(tái)，后臺(tái)接收了數(shù)據(jù)之后，再將數(shù)據(jù)存儲(chǔ)。

3.readAsDataURL():讀取文件獲取一段以data開(kāi)頭的字符串，這段字符串的本質(zhì)就是DataURL.DataURL是一種將文件(這個(gè)文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉(zhuǎn)換為base64編碼的字符串形式，并且將這些內(nèi)容直接存儲(chǔ)在url中>>優(yōu)化網(wǎng)站的加載速度和執(zhí)行效率。

為了幫助大家讓學(xué)習(xí)變得輕松、高效，給大家免費(fèi)分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這里給大家推薦一個(gè)前端全棧學(xué)習(xí)扣qun：784783012 歡迎大家進(jìn)群。交流討論，學(xué)習(xí)交流，共同進(jìn)步。
當(dāng)真正開(kāi)始學(xué)習(xí)的時(shí)候難免不知道從哪入手，導(dǎo)致效率低下影響繼續(xù)學(xué)習(xí)的信心。
但最重要的是不知道哪些技術(shù)需要重點(diǎn)掌握，學(xué)習(xí)時(shí)頻繁踩坑，最終浪費(fèi)大量時(shí)間，所以有效資源還是很有必要的。
學(xué)習(xí)前端，我們是認(rèn)真的

4.abort():中斷讀取

該對(duì)象常見(jiàn)應(yīng)用在即時(shí)預(yù)覽：

即時(shí)：當(dāng)用戶選擇完圖片之后就立刻進(jìn)行預(yù)覽的處理 >>onchange

預(yù)覽：通過(guò)文件讀取對(duì)象的readAsDataURL()完成。

以下是應(yīng)用時(shí)的具體實(shí)現(xiàn)：

·  HTML部分

· JS部分

其中獲取數(shù)據(jù)時(shí)，F(xiàn)ileReader還提供一個(gè)完整的事件模型，用來(lái)捕獲讀取文件時(shí)的狀態(tài)。

    onabort:讀取文件中斷片時(shí)觸發(fā)
    onerror:讀取錯(cuò)誤時(shí)觸發(fā)
    onload:文件讀取成功完成時(shí)觸發(fā)
    onloadend:讀取完成時(shí)觸發(fā)，無(wú)論成功還是失敗
    onloadstart:開(kāi)始讀取時(shí)觸發(fā)
    onprogress:讀取文件過(guò)程中持續(xù)觸發(fā)