input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览

最新推荐文章于 2023-03-10 11:22:57 发布

Tonvchong

最新推荐文章于 2023-03-10 11:22:57 发布

阅读量1w

点赞数

分类专栏： Html Jquery Jsp Javascript 问题处理开源文章标签：图片上传前预览获取图片长宽 input文件框选择本地图片后页面预览图获取图片长宽以及大小

本文链接：https://blog.csdn.net/tonvchong/article/details/22193435

版权

问题处理同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

开源

24 篇文章 0 订阅

订阅专栏

Jsp

23 篇文章 0 订阅

订阅专栏

前面有转过一篇通过HTML5来实现图片上传前预览，现在借助FileReader也实现了这个需求。并且同时还可以获得图片的长宽相素以及图片文件的大小。demo如下：

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(function(){
	$("#pstimg").change(function(){
		var file = this.files[0];
		alert("文件大小:"+(file.size / 1024).toFixed(1)+"kB");
		if (window.FileReader) {
			var reader = new FileReader();
			reader.readAsDataURL(file);
			//监听文件读取结束后事件
			reader.onloadend = function (e) {
				showXY(e.target.result,file.fileName);
			};
		}
	});
});
function showXY(source){
	var img = document.getElementById("loc_img");
	img.src = source;
	alert("Width:"+img.width+", Height:"+img.height);
}
</script>
</head>
<body>
<input type="file" name="pstimg" id="pstimg"/>
<img src="" id="loc_img" />
<body>
</html>

要了解更多有关FileReader的知识 FileReader