js实现上传图片及时预览

本文实例为大家分享了javascript图片预览功能实现的具体代码，供大家参考，具体内容如下
先为大家分享一段关于js图片预览的代码，兼容火狐和谷歌浏览器

 /* 案例展示图片预览 */$（function（）{$（"#file0"）.bind（"change",function（）{ clickupLoad（）;}）;}）;function clickupLoad（）{ var imgObject = document.getElementById（"file0"）;var getImageSrc = getFullPath（imgObject）; // 本地路径var srcs = window.URL.createObjectURL（imgObject.files[0]）;var pos = getImageSrc.lastIndexOf（"."）;var lastname = getImageSrc.substring（pos, getImageSrc.length） // 图片后缀] if（srcs！=""）{$（"#yulan2"）.attr（"src",srcs）;}else{alert（"请选择一张图片"）;} }function getFullPath（obj） {//得到图片的完整路径if （obj）{if （window.navigator.userAgent.indexOf（"MSIE"） >= 1）{obj.select（）;return document.selection.createRange（）.text; }else if（window.navigator.userAgent.indexOf（"Firefox"） >= 1） {if （obj.files） {return window.URL.createObjectURL（obj.files[0]）;}return obj.value;}return obj.value;}}

实例代码实现js上传图片及时预览：

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

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。