Javascript上传图片

百威

浏览: 711219 次
来自: ...

最近访客更多访客>>

gaozzsoft

A741841403

Liu.Guo.Zhu

mmmzzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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>

分享到：

让IE浏览器支持HTML5标准的方法 | MyEclipse 2014 扁平化主题

2014-01-11 08:25
浏览 2519
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Javascript上传图片

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Javascript上传图片

评论

发表评论

相关推荐

Javascript刷新页面的实例

一份老外写的XMLHttpRequest代码多浏览器支持兼容性

漂亮的Slider效果类终于封装成功

用简单的脚本实现一款漂亮的下拉菜单

Javascript操纵Cookie实现购物车程序

推荐:右键菜单

拖动层效果

发个自己写的表格操作类(添加，删除，排序，上移，下移)

cloneNode实现表格增加删除效果

支持IE和FF的div＋css选项卡

一个分页的js

JavaScript实现拖拽网页内元素的方法

让IE浏览器支持HTML5标准的方法

javascript ajax

javascript表格和表单

javascript事件

javascript基础

Javascript 验证上传图片大小[客户端]

带Checkbox的列表框

判断Checkbox和Radio的一种方法

最近访客更多访客>>