js实现上传图片实时预览，兼容chrome IE firefox多浏览器

来源：互联网发布：hse培训矩阵课件编辑：程序博客网时间：2024/05/19 16:47
直接上代码吧，一张图、多张图，都比较适用
<html><head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>图片上传本地预览</title>     <style type="text/css">.imgDiv{width:260px;height:190px;border:1px solid #000;overflow:hidden;}.imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style><script type="text/javascript">         //图片上传预览    IE是用了滤镜。        function previewImage(file,imgDiv,imgId){        //file表单，图片显示div，图片id          var MAXWIDTH  = 260;           var MAXHEIGHT = 180;          var div = document.getElementById(imgDiv);          if (file.files && file.files[0])          {              div.innerHTML ='<img class="imghead" id='+imgId+'>';              var img = document.getElementById(imgId);              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 class="imghead" id='+imgId+'>';            var img = document.getElementById(imgId);            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-left:"+rect.left+"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 class="imgDiv" id="d0"></div><input type="file" onchange="previewImage(this,'d0','img0')" />  <div class="imgDiv" id="d1"></div><input type="file" onchange="previewImage(this,'d1','img1')" />  <div class="imgDiv" id="d2"></div><input type="file" onchange="previewImage(this,'d2','img2')" /><div class="imgDiv" id="d3"></div><input type="file" onchange="previewImage(this,'d3','img3')" /></body>     </html>
1 0