图片上传并预览(兼容IE)

来源：互联网发布：域名和ip地址转换编辑：程序博客网时间：2024/05/16 09:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <script type="text/javascript" src="js/jquery.min.js"></script>    <script>      //图片上传预览    IE是用了滤镜。        function previewImage(file)        {          var MAXWIDTH  = 90;           var MAXHEIGHT = 90;          var div = document.getElementById('preview');          if (file.files && file.files[0])          {              div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';              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){img.src = evt.target.result;}              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;            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;"+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>图片</div><div id="preview"><img id="imghead" border="0" src="img/photo_icon.png" width="90" height="90" onClick="$('#previewImg').click();"> </div>         <input type="file" onChange="previewImage(this)" style="display: none;" id="previewImg"></body></html>
阅读全文
0 0