FileReader接口中包含了一套完整的事件模型,可用于捕捉读取文件时的状态。事件列表如下:
onbort:中断时触发
onerror:出错时触发
onload:文件读取成功完成时触发
onloadend:读取完成触发,无论成功还是失败
onloadstart:读取开始时触发
onprogress:读取中
下面给的源代码展示了文件读取过程中各事件的触发顺序:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function readFile()
{
var file=document.getElementById("file").files[0];
var result=document.getElementById("result");
var reader=new FileReader();
reader.readAsDataURL(file);
reader.οnlοad=function(e)
{
result.innerHTML='<img src="'+this.result+'" alt=""/>'
alert("onload");
}
reader.οnprοgress=function(e)
{
alert("onprogress");
}
reader.οnlοadstart=function(e)
{
alert("start");
}
}
</script>
</head>
<body>
请选择文件:<input id="file" type="file" /><input type="button" value="显示图像" οnclick="readFile();"/>
<div id="result" name="result">
</div>
</body>
</html>