JS实现input上传图片时显示缩略图

注意：以下代码只适用于chrome、Firefox和IE10以上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Js实现input上传图片时显示缩略图</title>
</head>
	<input type="file" id="imgFile" /><br /><br />
	<img src="" height="50" />
<body>
</body>
</html>
<script>
	/**
		1.获取input DOM里面的files[0] 和 imgDOM
		2.new FileReader对象
		3.判断flie是否存在，存在就阅读readAsDataURL
		4.img路径赋值上reader.result
	*/
	document.getElementById('imgFile').onchange = function(){
		var preview = document.querySelector("img");
		var file = document.querySelector("input[type=file]").files[0];
		var reader = new FileReader();
		if(file){
			reader.readAsDataURL(file);
		}else{
			preview.src = '';
		}
 
		reader.onloadend = function(){
			preview.src = reader.result;
		}
	}
</script>
posted @ 2022-12-06 22:21  轻风细雨_林木木  阅读(209)  评论(0)    收藏  举报