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

来源：互联网发布：互联网软件市场推广编辑：程序博客网时间：2024/06/02 23:30

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

<!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>

0 0

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

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