首页 > Web开发 > 详细

html5 FileReader初识

时间:2015-08-12 23:00:22      阅读:270      评论:0      收藏:0      [点我收藏+]

使用html5的FileReader可以实现多媒体文件的预览功能,代码如下:

<html>
<head>
<script type="text/javascript">
var fileReader = new FileReader();
fileReader.onload = function(event)
{
	document.getElementById(‘image‘).src = event.target.result;
}
function showImage()
{
	var file = document.getElementById("files").files[0];
	fileReader.readAsDataURL(file);

}
</script>
</head>
<body>
	<input type="file" id="files" value="files" onchange="showImage();"/>
	<div>
		<img src="" id="image" style="width:500px;height:500px;"/>
	</div>
</body>
</html>

代码效果如下:

技术分享

 

FileReader接口有如下方法:

方法名参数描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
 
FileReader.onload 为上传成功的回调函数
 
技术分享
技术分享

html5 FileReader初识

原文:http://www.cnblogs.com/skywalkerfly/p/4725599.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!