FileReader方法

FileReader接口可以使web程序異步讀取用戶電腦上文檔的內容（或原始數據緩衝區），使用File或是Blob對象來指定須要讀取的文件或數據。

 

File對象能夠經過多種方式得到：用戶使用<input>元素在文件列表中選擇；經過拖放的操做使用DataTransfer對象獲取；也可以使用HTMLCanvasElement中的mozGetAsFile()接口獲取。

 

構造函數

FileReader() 返回一個新建FileReader

 

屬性

FileReader.error(只讀): 一個DOMError接口反映了讀取文件過程當中的錯誤。

 

FileReader.readyState(只讀)：一個代表了FileReader狀態的數字，數字列表以下：

 

EMPTY	0	沒有數據加載
LOADING	1	數據正在加載
DONE	2	所有讀取請求已完成

 

 

 

 

FileReader.result(只讀)：被選定文件的內容。這個屬性在讀取操做完成後纔可用，數據格式取決於初始化讀取操做時選擇的方法。

 

事件處理程序

 

FileReader.onabort： 中斷事件的處理程序，讀取操做被停止觸發該事件。

FileReader.onerror：錯誤事件的處理程序，讀取操做時每次遇到錯誤觸發該事件。

FileReader.onload：加載事件的處理程序，讀取操做成功完成時觸發該事件。

FileReader.onloadstart：加載開始事件的處理程序，讀取操做開始時觸發該事件。

FileReader.onloadend：加載結束事件的處理程序，讀取操做完成時觸發該事件（無論是成功仍是失敗）。

FileReader.onprogress：事件進展的處理程序，讀取Blob內容時觸發該事件。

 

方法

FileReader.abort()：中斷讀取操做，readyState返回2。

FileReader.readAsArrayBuffer()：使用指定的二進制對象來讀取內容，使用數組緩衝器來展現文件數據。

FileReader.readAsBinaryString()：使用指定的二進制對象來讀取內容，使用原始二進制字符串來展現文件數據。

FileReader.readAsArrayBuffer()：使用指定的二進制對象來讀取內容，使用URL來展現文件數據。

FileReader.readAsArrayBuffer()：使用指定的二進制對象來讀取內容，使用文本字符串來展現文件數據。

 

angularjs示例：

app.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$parent.import(loadEvent.target.result);
                }
                reader.readAsText(changeEvent.target.files[0]);
            });
        }
    }
}]);