上传图片时显示选择的图片

最新推荐文章于 2021-10-18 14:13:33 发布

做一个快乐的肥宅

最新推荐文章于 2021-10-18 14:13:33 发布

阅读量597

点赞数 1

分类专栏： script 文章标签：上传图片时显示图片图片上传实时显示

本文链接：https://blog.csdn.net/qq_35929292/article/details/97939189

版权

script 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>本地图片实时显示</title>

</head>
<body>
	<input type="file" onchange="getImg(this,'fileImg')">
	<img src="" id="fileImg">
</body>
<script type="text/javascript">
function getImg(_this, imgId){
	var file = _this.files[0];
	if(window.FileReader) {//判断浏览器是否支持FileReader
		var fileReder = new FileReader();//获得一个FileReader解析对象
		fileReder.readAsDataURL(file);//将文件读取为 DataURL
		fileReder.onload = function(){//文件读取成功完成时触发
			var base64Img = this.result;//文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果
			document.getElementById("fileImg").src = base64Img;
		}
	}else{
		var url = "";
		if (window.createObjectURL != undefined) {          // basic
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) {               // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) {         // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		document.getElementById("fileImg").src = url;
	}
}
</script>
</html>

做一个快乐的肥宅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传图片时显示选择的图片

<!DOCTYPE html><html><head> <title>本地图片实时显示</title></head><body> <input type="file" onchange="getImg(this,'fileImg')"> <img src="" id="fi...
复制链接

扫一扫