FileReader接口主要用来把文件对象或者Blob对象读入内存,并使用属性方法从文件或Blob中读取数据。它继承自EventTarget。而且还使用了异步机制的API,使用该API可以在浏览器主线程中异步访问文件系统。
1、FileReader支持的属性、事件、方法如下:
[Constructor]
interface FileReader: EventTarget {
// async read methods
void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString encoding);
void readAsDataURL(Blob blob);
void abort();
// states
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
// File or Blob data
readonly attribute any result;
readonly attribute DOMError error;
// event handler attributes
attribute [TreatNonCallableAsNull] Function? onloadstart;
attribute [TreatNonCallableAsNull] Function? onprogress;
attribute [TreatNonCallableAsNull] Function? onload;
attribute [TreatNonCallableAsNull] Function? onabort;
attribute [TreatNonCallableAsNull] Function? onerror;
attribute [TreatNonCallableAsNull] Function? onloadend;
};
2、事件
onabort 数据读取中断触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发
3、方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制代码
readAsArrayBuffer blob 将文件读取问ArrayBuffer
readAsText file,[encoding] 将文件读取为文本 //第二个参数为编码方式,默认为utf-8
readAsDataURL file 将文件读取为DataURL //该方法事实上以一种特殊格式的URL地址形式直接读入页面(图片,html)
abort none 中断读取
4、例子
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
//判断是否支持FileReader
if(typeof FileReader=='undefined')
{
result.innerHTML = "<p> your browser not support the FileReader </p>"
file.setAttribute('disabled','disabled');
}
function readAsBinaryString()
{
var file = document.getElementById("file").file[0];
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(f)
{
var result = document.getElementById("result");
result.innerHTML = this.result;
}
}
</script>