基于javascript代码实现通过点击图片显示原图片

废话不多说了，直接给大家贴js实现点击图片显示原图片的代码，具体代码如下所示：

function DrawImage（ImgD）{var image = new Image（）;image.src=ImgD.src;var width = $（ImgD）.attr（"width"）;var height = $（ImgD）.attr（"height"）;if（width >100 && height>80）{ImgD.width=100; ImgD.height=80;ImgD.alt=image.width+"×"+image.height;}else{if（image.width>0 && image.height>0）{flag=true;if（image.width>300 || image.height>200）{ImgD.width=image.width/2; ImgD.height=image.height/2;ImgD.alt=image.width+"×"+image.height;}else{ImgD.width=image.width;ImgD.height=image.height;ImgD.alt=image.width+"×"+image.height;}}}}

下面分享一段关于js实现上传图片及时预览

<！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>