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

最新推荐文章于 2019-09-26 11:01:40 发布

奇幻屋

最新推荐文章于 2019-09-26 11:01:40 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 缩略图图片上传

本文链接：https://blog.csdn.net/u014236259/article/details/78409550

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注意：以下代码只适用于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>
	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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奇幻屋

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
JS实现input上传图片时显示缩略图

注意：以下代码只适用于chrome、IE10以上Js实现input上传图片时显示缩略图 document.getElementById('imgFile').onchange = function(){ var preview = document.querySelector("img"); var file = document.querySelector
复制链接

扫一扫