HTML5中FileReader中的事件

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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章