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

转自：https://blog.csdn.net/yusewuhen/article/details/47656887

<!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" onchange="previewImage(this)" /> <br>
   <img id="imghead" src=''>
</body>
</html>

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

猜你喜欢