html5的FileReader文件讀取
此文引用:http://blog.csdn.net/jackfrued/article/details/8967667
一:FileReader
FileReader是API重要成員用於讀取文件,FileReader接口提供了讀取文件的方法和包含讀取事件結果的事件模型;
二:FileReader事件的方法
FileReader 的實例擁有 4 個方法,其中 3 個用以讀取文件,另一個用來中斷讀取
1: readAsDataURL 參數file 將文件讀取為 DataURL
這是例子程序中用到的方法,該方法將文件讀取為一段以 data: 開頭的字符串,這段字符串的實質就是 Data URL,Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件通常是指圖像與 html 等格式的文件。
2: readAsText 參數 file [encoding] 將文件讀取為文本
該方法有兩個參數,其中第二個參數是文本的編碼方式,默認值為 UTF-8。這個方法非常容易理解,將文件以文本方式讀取,讀取的結果即是這個文本文件中的內容。
3: readAsBinaryString 參數 file 將文件讀取為二進制碼
該方法將文件讀取為二進制字符串,通常我們將它傳送到後端,後端可以通過這段字符串存儲文件。
4: abort 參數 none 中斷讀取
註意:無論讀取成功或失敗,方法並不會返回讀取結果,這一結果存儲在 result屬性中。
三:處理事件
FileReader 包含了一套完整的事件模型,用於捕獲讀取文件時的狀態,下面這個表格歸納了這些事件。
onabort 中斷時觸發
- onerror 出錯時觸發
- onload 文件讀取成功完成時觸發
- onloadend 讀取完成觸發,無論成功或失敗
- onloadstart 讀取開始時觸發
- onprogress 讀取中
文件一旦開始讀取,無論成功或失敗,實例的 result 屬性都會被填充。如果讀取失敗,則 result 的值為 null ,否則即是讀取的結果,絕大多數的程序都會在成功讀取文件的時候,抓取這個值。
四:實例應用
1.檢測瀏覽器對FileReader的支持
if(window.FileReader) {
var fr = new FileReader();
} else {
alert("Not supported by your browser!");
}
2. 如果要限定上傳文件的類型,可以通過文件選擇器獲取文件對象並通過type屬性來檢查文件類型(判斷圖片文件)
if(!/image\/\w+/.test(file.type)){
alert("請確保文件為圖像類型"); return false;
}
不難發現這個檢測是基於正則表達式的,因此可以進行各種復雜的匹配,非常有用。
<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 創建文件讀取對象 實例化一個讀取器
var reader = new FileReader();
// 0 通過當前的file標簽 獲取選擇的文件信息
console.log(this.files);
// 2 調用該對象的方法 讀取文件 文件
// 讀取文件是一個耗時操作 不一定什麽時候讀取完畢
reader.readAsDataURL(this.files[0]);
// reader.readAsDataURL(f);
// 3 添加事件 當文件過大,不能立即讀完 通過事件監聽進度
// 耗時操作 通過事件的方式進行註冊 並且回調
reader.onload = function (){
// 使用讀取完畢的文件
console.log(reader.result);
//使用返回的結果 即可
document.querySelector(‘.iconBox‘).style.background = ‘url(‘+ reader.result+‘) no-repeat center/cover‘;
}
}
</script>
html5的FileReader文件讀取