此文引用：http://blog.csdn.net/jackfrued/article/details/8967667

一：FileReader

FileReader是API重要成員用于讀取文件，FileReader接口提供了讀取文件的方法和包含讀取事件結(jié)果的事件模型；

二：FileReader事件的方法

FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取

1： readAsDataURL　　參數(shù)file　　將文件讀取為 DataURL

這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質(zhì)就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。

2：?readAsText　　參數(shù) file?[encoding]　　將文件讀取為文本

該方法有兩個參數(shù)，其中第二個參數(shù)是文本的編碼方式，默認(rèn)值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結(jié)果即是這個文本文件中的內(nèi)容。

3： readAsBinaryString　　參數(shù) file?　　將文件讀取為二進(jìn)制碼

該方法將文件讀取為二進(jìn)制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。

4： abort?　　參數(shù) none　　中斷讀取

注意：無論讀取成功或失敗，方法并不會返回讀取結(jié)果，這一結(jié)果存儲在?result屬性中。

三：處理事件

FileReader 包含了一套完整的事件模型，用于捕獲讀取文件時的狀態(tài)，下面這個表格歸納了這些事件。

• onabort　　中斷時觸發(fā)
• onerror　　出錯時觸發(fā)
• onload　　文件讀取成功完成時觸發(fā)
• onloadend?　　讀取完成觸發(fā)，無論成功或失敗
• onloadstart　　讀取開始時觸發(fā)
• onprogress　　讀取中

文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結(jié)果，絕大多數(shù)的程序都會在成功讀取文件的時候，抓取這個值。

四：實例應(yīng)用

1.檢測瀏覽器對FileReader的支持　　?

　　if(window.FileReader)?{ ?

???　　?var?fr?=?new?FileReader(); ?//?add?your?code?here ?

　　} ?else?{ ?

????　　alert("Not?supported?by?your?browser!");??

　　} ?

2. 如果要限定上傳文件的類型，可以通過文件選擇器獲取文件對象并通過type屬性來檢查文件類型（判斷圖片文件）

　　if(!/image\/\w+/.test(file.type)){ ?

? 　　　alert("請確保文件為圖像類型"); ?return?false; ?

　　} ?

不難發(fā)現(xiàn)這個檢測是基于正則表達(dá)式的，因此可以進(jìn)行各種復(fù)雜的匹配，非常有用。

　　<div class='container'>
　　　　<input type="file" multiple id="selectFile" />
　　　　<div class='iconBox'></div>
　　</div>

　　<script type="text/javascript">
　　　　document.querySelector('input[type=file]').onchange = function (){

　　　　　　// 1 創(chuàng)建文件讀取對象 實例化一個讀取器
　　　　　　var reader = new FileReader();

　　　　　　// 0 通過當(dāng)前的file標(biāo)簽 獲取選擇的文件信息
　　　　　　console.log(this.files);

　　　　　　// 2 調(diào)用該對象的方法 讀取文件 文件
　　　　　　// 讀取文件是一個耗時操作 不一定什么時候讀取完畢
　　　　　　reader.readAsDataURL(this.files[0]);
　　　　　　// reader.readAsDataURL(f);

　　　　　　// 3 添加事件 當(dāng)文件過大，不能立即讀完 通過事件監(jiān)聽進(jìn)度
　　　　　　// 耗時操作 通過事件的方式進(jìn)行注冊 并且回調(diào)
　　　　　　reader.onload = function (){
　　　　　　　　// 使用讀取完畢的文件
　　　　　　　　console.log(reader.result);
　　　　　　　　//使用返回的結(jié)果 即可
　　　　　　　　document.querySelector('.iconBox').style.background = 'url('+ reader.result+') no-repeat center/cover';
　　　　　　}
　　　　}
</script>

轉(zhuǎn)載于:https://www.cnblogs.com/renshijie/p/8001668.html

總結(jié)

以上是生活随笔為你收集整理的html5的FileReader文件读取的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。