码迷,mamicode.com
首页 > Web开发 > 详细

html5 FileReader初识

时间:2015-08-12 23:01:14      阅读:160      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!