图片上传预览获得像素长宽

最新推荐文章于 2024-02-22 08:30:00 发布

月色无痕

最新推荐文章于 2024-02-22 08:30:00 发布

阅读量1.7k

点赞数

分类专栏： Web 文章标签：图片预览 js获得长宽

本文链接：https://blog.csdn.net/yusewuhen/article/details/47656887

版权

Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现图片上传之前的预览功能及获得该图片的长宽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 
 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>图片上传本地预览</title>     
<style type="text/css">
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
        //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          if (file.files && file.files[0])
          {
              var img = document.getElementById('imghead');
              var reader = new FileReader();
              reader.onload = function(evt){
				//img.src = evt.target.result;
				var image = new Image();
				image.src=evt.target.result;
				 var height = image.height;
				 var width = image.width;
				 var filesize = image.fileSize;
				  alert(width+"x.."+filesize+"::"+height);
			  }
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
			//alert(src);
            var img = document.getElementById('imghead');
			img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            //img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
			document.selection.empty();
			var image = new Image();
			image.src=src;
			var height = image.height;
			var width = image.width;
			//var filesize = image.fileSize;
			alert(width+"::"+height);	
			
          }
        }
		function getImageWH(src){
			var image = new Image();
			image.src=src;
			var height = image.height;
			var width = image.width;
			//var filesize = image.fileSize;
			alert(width+"::"+height);
			return width;
		}
</script>     
</head>     
<body>
      
    <input type="file" οnchange="previewImage(this)" />    <br> 
	 <img id="imghead"  src=''>
</body>     
</html>