日志分类 > 前端开发
兼容大多数浏览器的js本地图片预览
发布时间:2013-11-29 发布: 分类:前端开发
html代码
<div id="divPreview">
<img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" />
</div>
<asp:FileUpload ID="fuHeadPhoto" runat="server" onchange="PreviewImage(this,'imgHeadPhoto','divPreview')" size="20" />
将网上的js本地图片预览整合了一下,希望对大家有用,如有其他浏览器不兼容且有解决办法,请给我留言,我将及时更新本文代码。
javascript代码
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3、360浏览器 function PreviewImage(fileObj,imgPreviewId,divPreviewId){ var allowExtention=".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; var extention=fileObj.value.substring (fileObj.value.lastIndexOf(".")+1).toLowerCase(); var browserVersion= window.navigator.userAgent.toUpperCase(); if(allowExtention.indexOf(extention)>-1){ if(fileObj.files){ if(window.FileReader){ var reader = new FileReader(); reader.onload = function(e){ document.getElementById(imgPreviewId).setAttribute("src",e.target.result); } reader.readAsDataURL(fileObj.files[0]); }else if(browserVersion.indexOf("SAFARI")>-1){ alert("不支持Safari浏览器6.0以下版本的图片预览!"); } }else if (browserVersion.indexOf("MSIE")>-1){//ie、360低版本预览 if(browserVersion.indexOf("MSIE 6")>-1){//ie6 document.getElementById(imgPreviewId).setAttribute("src",fileObj.value); }else{//ie[7-9] fileObj.select(); if(browserVersion.indexOf("MSIE 9")>-1) fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问 var newPreview =document.getElementById(divPreviewId+"New"); if(newPreview==null){ newPreview =document.createElement("div"); newPreview.setAttribute("id",divPreviewId+"New"); newPreview.style.width = document.getElementById(imgPreviewId).width+"px"; newPreview.style.height = document.getElementById(imgPreviewId).height+"px"; newPreview.style.border="solid 1px #d2e2e2"; } newPreview.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; var tempDivPreview=document.getElementById(divPreviewId); tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview); tempDivPreview.style.display="none"; } }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if(firefoxVersion<7){//firefox7以下版本 document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL()); }else{//firefox7.0+ document.getElementById(imgPreviewId).setAttribute ("src",window.URL.createObjectURL(fileObj.files[0])); } }else{ document.getElementById(imgPreviewId).setAttribute("src",fileObj.value); } }else{ alert("仅支持"+allowExtention+"为后缀名的文件!"); fileObj.value="";//清空选中文件 if(browserVersion.indexOf("MSIE")>-1){ fileObj.select(); document.selection.clear(); } fileObj.outerHTML=fileObj.outerHTML; } } 讯博网络:http://www.cenbel.com/
查看 [2167] 评论 [0]
相关标签:
网页设计
文章评论
暂无数据!
我来说两句
最新评论