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>

上一篇vue "keyId=xxxxx&keyId=xxxxx&keyId=xxxxx" 传值办法

下一篇mysql 数据库迁移办法

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961338.html

posted @ 2022-12-06 22:21 轻风细雨_林木木阅读(202) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

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

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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