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>