html5 FileReader初识

时间 2019-11-10

原文原文链接

使用html5的FileReader能够实现多媒体文件的预览功能，代码以下：javascript

<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>

代码效果以下：html

FileReader接口有以下方法：html5

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操做

FileReader.onload 为上传成功的回调函数