HTML5學習第8篇——FileReader
1、簡介
FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。
其中File物件可以是來自使用者在一個<input>元素上選擇檔案後返回的FileList物件,也可以來自拖放操作生成的 DataTransfer物件,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。
2、建構函式
返回一個新構造的FileReader
var reader = new FileReader();3、屬性
一個DOMException，表示在讀取檔案時發生的錯誤 。
表示FileReader狀態的數字。取值如下：
| 常量名 | 值 | 描述 |
EMPTY |
0 |
還沒有載入任何資料. |
LOADING |
1 |
資料正在被載入. |
DONE |
2 |
已完成全部的讀取請求. |
檔案的內容。該屬性僅在讀取操作完成後才有效，資料的格式取決於使用哪個方法來啟動讀取操作。
4、事件處理
處理abort事件。該事件在讀取操作被中斷時觸發。
處理error事件。該事件在讀取操作發生錯誤時觸發。
處理load事件。該事件在讀取操作完成時觸發。
處理loadstart事件。該事件在讀取操作開始時觸發。
處理loadend事件。該事件在讀取操作結束時（要麼成功，要麼失敗）觸發。
因為 FileReader 繼承自EventTarget，所以所有這些事件也可以通過addEventListener方法使用。
5、方法
中止讀取操作。在返回時，readyState屬性為DONE。
FileReader.readAsArrayBuffer()
開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中儲存的將是被讀取檔案的 ArrayBuffer 資料物件.
FileReader.readAsBinaryString()
開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取檔案的原始二進位制資料。
開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字串以表示所讀取檔案的內容。
開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字串以表示所讀取的檔案內容。
6、瀏覽器相容
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2)[1] | 7 | (Yes) | 10 | 12.02[2] | 6.0 |
| Support in Web Workers | 46 (46) | (Yes) | (Yes) | 未實現 | (Yes) | 未實現 |
error property uses DOMException, not DOMError |
58 (58) | (Yes) | (Yes) | 未實現 | (Yes) | 未實現 |
7、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file</title>
</head>
<body>
<input type="file" id="styleFile" />點我上傳css檔案<br/>
<input type="file" id="jsFile" />點我上傳js檔案<br/>
<input type="file" id="imageFile" accept="image/*"/>點我上傳圖片<br/>
<input type="file" id="videoFile" />點我上傳視訊<br/>
<div id="result"></div>
<script type="text/javascript">
//獲取上傳檔案物件
var f1 = document.querySelector('#styleFile');
//為檔案上傳物件新增onchange事件，一旦發生檔案上傳操作就觸發
f1.onchange = function(){
//通過this.files獲取上傳的檔案物件，取下標為0的file物件
var fc1 = this.files[0];
//建立讀取檔案物件
var fReader = new FileReader();
//1.按字元讀取檔案內容，結果用字串形式表示
fReader.readAsText(fc1);
//成功讀取檔案後的載入事件
fReader.onload = function(){
//建立style樣式標籤
var style = document.createElement("style");
//讀取結果存放在result中
style.innerHTML = fReader.result;
document.querySelector('head').append(style);
};
};
var f2 = document.querySelector('#jsFile');
f2.onchange = function(){
var fl2 = this.files[0];
var reader = new FileReader();
//2.按位元組讀取檔案內容，結果為檔案的二進位制串
reader.readAsBinaryString(fl2);
//3.按位元組讀取檔案內容，結果用ArrayBuffer物件表示,讀取blob物件
//reader.readAsArrayBuffer(fl2);
reader.onload = function(){
//建立style樣式標籤
var script = document.createElement("script");
//讀取結果存放在result中
script.innerHTML = reader.result;
document.querySelector('body').append(script);
//console.log(reader.result);
//document.querySelector('#result').innerHTML = reader.result;
}
}
var f3 = document.querySelector('#imageFile');
f3.onchange = function(){
var fl3 = this.files[0];
var reader = new FileReader();
//讀取檔案內容，結果用data:url的字串形式表示,readAsDataURL會將檔案內容進行base64編碼後輸出
reader.readAsDataURL(fl3);
reader.onload = function(){
console.log(reader.result);
document.querySelector('#result').innerHTML='<img src="'+this.result+'" />' ;
}
}
var f4 = document.querySelector('#videoFile');
f4.onchange = function(){
var fl4 = this.files[0];
var reader = new FileReader();
//讀取檔案內容，結果用data:url的字串形式表示,readAsDataURL會將檔案內容進行base64編碼後輸出
reader.readAsDataURL(fl4);
reader.onload = function(){
console.log(reader.result);
document.querySelector('#result').innerHTML='<video src="'+this.result+'" controls/>' ;
}
}
</script>
</body>
</html>上傳的css檔案內容
div{
width: 200px;
height: 100px;
background-color: red;
}上傳的js檔案內容
document.querySelector('div').onclick=function () {
this.style.backgroundColor='yellow';
};更多詳細使用請訪問：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader