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)	終端讀取操做