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]);
            });
        }
    }
}]);