JS上传图片且在线预览，修改浏览器兼容性问题

来源：互联网发布：百度推广软件三尾狐编辑：程序博客网时间：2024/06/06 13:09
<span style="font-size:14px;">    <!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 charset="utf-8" />    <title>本地图片预览</title>    <style type="text/css">    #preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;}    #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}    </style>    <script type="text/javascript">    function previewImage(file)    {        var MAXWIDTH  = 300;      var MAXHEIGHT = 300;      var div = document.getElementById('preview');      if (file.files && file.files[0])      {        div.innerHTML = '<img id=imghead>';        var img = document.getElementById('imghead');        img.onload = function(){          var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);          img.width = rect.width;          img.height = rect.height;          img.style.marginLeft = rect.left+'px';          img.style.marginTop = rect.top+'px';        }        var reader = new FileReader();        reader.onload = function(evt){ var type = evt.target.result.substr(0,10); if(type!='data:image'){alert("请选择图片上传");return ; }img.src = evt.target.result;}        reader.readAsDataURL(file.files[0]);      }      else      {        var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';        file.select();        var src = document.selection.createRange().text;var type =src.substr(src.lastIndexOf(".")+1);  type = type.toLowerCase();    var reg = new RegExp("^(png|jpg|bmp|gif|jpeg)$");  if(!reg.test(type)){ alert("请选择图片上传");return ;}         div.innerHTML = '<img id=imghead>';        var img = document.getElementById('imghead');        img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);        status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);        div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";      }    }    function clacImgZoomParam( maxWidth, maxHeight, width, height ){        var param = {top:0, left:0, width:width, height:height};        if( width>maxWidth || height>maxHeight )        {            rateWidth = width / maxWidth;            rateHeight = height / maxHeight;            if( rateWidth > rateHeight )            {                param.width =  maxWidth;                param.height = Math.round(height / rateWidth);            }else            {                param.width = Math.round(width / rateHeight);                param.height = maxHeight;            }        }        param.left = Math.round((maxWidth - param.width) / 2);        param.top = Math.round((maxHeight - param.height) / 2);        return param;    }    </script>    </head>    <body>    <div id="preview">        <img id="imghead" width="300" height="300" border="0" src='../images/demo.jpg'><!--无预览时的默认图像，自己弄一个-->    </div>        <br/>        <input type="file" onchange="previewImage(this)" />    </body>    </html>     </span>
转载：http://www.codefans.net/articles/1395.shtml
0 0