HTML5 FileReader讀取Blob對象API詳解

　使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容,可以使用File對象或者Blob對象來指定所要讀取的文件或數據.其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自由拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后的返回結果。

創建FileReader對象，

var reader = new FileReader();

屬性：

1.result  jsval 讀取的文件內容，這個屬性只在讀取操作完成之后才有效，並且數據的格式取決於讀取操作發起的方法。只讀

2.readyState  unsigned short  當前狀態值，0---EMPTY 還沒有記載任何數據。1--LOADING 正在被記載。2---DONE 已完成全部的讀取請求。

3.error  DOMError 在讀取文件時發生的錯誤，只讀。

方法：

void abort() ,中止讀取操作，返回時，readyState屬性值為DONE

void readAsArrayBuffer( in Blob blob), 讀取文件為 ArrayBuffer

void readAsBinaryString(in Blob blob),讀取文件為二進制字符串，IE瀏覽器不支持該方法

void readAsDataURL(in Blob blob),讀取文件為DataURL ,關於DataURL

void readAsText(in Blob blob,[optional] in DOMString encoding),指定文件編碼（默認值utf-8），讀取Blob為字符串

事件監聽：

onabort 當讀取操作被終止時調用.

onerror 當讀取操作發生錯誤時調用.

onload 當讀取操作成功完成時調用.

onloadend 當讀取操作完成時調用,不管是成功還是失敗.該處理程序在onload或者onerror之后調用.

onloadstart 當讀取操作將要開始之前調用.

onprogress 在讀取數據過程中周期性調用.

事件傳遞的參數對象：

//e.target  FileReader
//e.total   文件總大小，字節
//e.type    上傳狀態‘load’
//e.timeStamp  還不知道

瀏覽器兼容性

Desktop、Mobile

Feature	Firefox (Gecko)	Chrome	Internet Explorer*	Opera*	Safari
Basic support	3.6 (1.9.2)	7	10	Not supported	Not supported

*IE9有一個File API Lab.Opera從11.10開始部分支持該API.

實例1，檢測瀏覽器是否支持FileReader

//1.檢測瀏覽器是否支持FileReader
//測試結果，IE>=10,Google，FF
if (window.FileReader) {
    var fr = new FileReader();
    console.info(fr);
} else {
    alert("Not supported by your browser!");
}

實例2. FileReader讀取File對象，讀取文件實例

<div class="container">
    <input type="file" id="file" multiple />
    <input type="button" id="btn1" value="選擇上傳文件" onclick="showFiles();" />
    <h4>
        選擇文件如下:
    </h4>
    <blockquote></blockquote>
</div>

var fileBox = document.getElementById('file');
function showFiles() {
    //獲取選擇文件的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        readFile(file);
    }
}
//讀取文件內容
//reader.readAsArrayBuffer   //將讀取結果 封裝成 ArrayBuffer ，如果想使用一般需要轉換成 Int8Array或DataView
//reader.readAsBinaryString  //在IE瀏覽器中不支持改方法
//reader.readAsText     該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8
//reader.readAsDataURL  //讀取結果為DataURL 
//reader.readyState    上傳中的狀態
function readFile(file) {
    var reader = new FileReader();
    //reader.readAsText(file);
    //中文windows系統 txt 文本多數默認編碼 gbk
    reader.readAsText(file, 'gbk');
    console.info(reader.readyState); // 狀態值 1
    reader.onload = function (e) {
        console.info(e); //事件對象
        //e.target  FileReader
        //e.total   文件總大小，字節
        //e.type    上傳狀態‘load’
        //e.timeStamp  還不知道

        console.info(reader.readyState); //狀態值 2
        var result = reader.result;
        $('.container blockquote').text(result);
    }
}

更多實例：