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

心已赠人 2024-02-17 16:07 6阅读 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>