HTML5中FileReader中的事件

最新推荐文章于 2023-05-18 19:02:02 发布

三明自

最新推荐文章于 2023-05-18 19:02:02 发布

阅读量5.8k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/double215726/article/details/19160005

版权

HTML5 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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>

三明自

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5中FileReader中的事件

FileReader接口中包含了一套完整的事件模型，可用于捕捉读取文件时的状态。事件列表如下：onbort：中断时触发onerror：出错时触发onload：文件读取成功完成时触发onloadend：读取完成触发，无论成功还是失败onloadstart：读取开始时触发onprogress：读取中下面给的源代码展示了文件读取过程中各事件的触发顺序：无标题
复制链接

扫一扫