`

Javascript上传图片

javascript 
阅读更多 
<!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"  style="display:none;" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'> 
	</div> 
	     
	      
	    <input type="file" onchange="previewImage(this)" />    
	</body>    
	</html>
分享到：
| MyEclipse 2014 扁平化主题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics