HTML5的FileReader实现本map片上传预览

HTML5的FileReader实现本地图片上传预览

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="file" id="file" multiple></input>
	<input type="button" id="btn" value="读取"></input>
	<div id="result"></div>
</body>
</html>
<script type="text/javascript">
var btn=document.getElementById('btn');

btn.onclick=read;

function read(){
var x = document.getElementById("file");
for (var i = 0; i <= x.files.length - 1; i++)
	{
		var y=x.files[i];
		var reader=new FileReader();
		reader.readAsDataURL(y);

		reader.onload=function(){
			var result=document.getElementById("result");
			var w=document.createElement("img");
			c=this.result;
			w.src=c.toString();
			result.appendChild(w);
		};
	};
}
</script>

HTML5的FileReader实现本map片上传预览

相关推荐