js实现上传图片及时预览

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30586257

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/htys/p/3870213.html

1. [代码][HTML]代码跳至 [1] [全屏预览]

         <!
         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"
         >
        
         #preview{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)
        
         {
        
         var MAXWIDTH  = 260; 
        
         var MAXHEIGHT = 180;
        
         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){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 
         id
         =
         "preview"
         >
        
         <
         img 
         id
         =
         "imghead" 
         width
         =
         100 
         height
         =
         100 
         border
         =
         0 
         src='<%=request.getContextPath()%>/images/defaul.jpg'>
        
         </
         div
         >
        
         <
         input 
         type
         =
         "file" 
         onchange
         =
         "previewImage(this)" 
         />     
        
         </
         body
         >     
        
         </
         html
         >