JavaScript图片上传前的图片预览功能
2015-09-03 10:58
621 查看
JS代码:
前台页面:
遇到问题:ie8及以下document.selection.createRange()拒绝访问,导致图片无法预览的问题
参考资料:http://blog.csdn.net/yiluoak_47/article/details/7869154
解决方案:如上,虽然我的是ie9能正常使用,ie78不行,但是获取焦点后同样解决了该问题
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 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) { //HTML5实现预览,兼容chrome、火狐7+等 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("不支持Safari6.0以下浏览器的图片预览!"); } } else if (browserVersion.indexOf("MSIE") > -1) { 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"; } document.getElementById("divfocus").focus(); //解决document.selection.createRange()拒绝访问的问题 newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; //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; } }
前台页面:
<div style="width: 190px;" id="divfocus"> <div runat="server" id="divPreview" class="divProImg"> <img id="txImg" class="txImg" runat="server" onclick="upclick();" src="../skin/default/images/Default/undefined1.png" /> </div> <asp:FileUpload ID="upLoadImage" runat="server" onchange="PreviewImage(this,'cphContent_txImg','cphContent_divPreview')" CssClass="fuhide" /> <input runat="server" id="txtImg" type="text" style="display: none" /> </div>
遇到问题:ie8及以下document.selection.createRange()拒绝访问,导致图片无法预览的问题
参考资料:http://blog.csdn.net/yiluoak_47/article/details/7869154
最近发现,在IE9下,公司网站的本地图片预览都无法正常显示,经过测试发现,原因在于IE9下无法获取file控件的文件路径。 以前的代码如下: var strPic = fileImg.value; if ($.ie && $.browser.version > 6) { fileImg.select(); strPic = document.selection.createRange().text; document.selection.empty(); } 如果strPic不为空,则使用滤镜预览。 以上代码在IE 6 7 8均正常使用,在IE9下,document.selection.createRange()拒绝访问,看来安全性有所提高。 最后测试发现,在IE9下,如果file控件获得焦点,则document.selection.createRange()拒绝访问, 因此,只需要在fileImg.select()后面加一句fileImg.blur()即可。 但是,如果当前页面被嵌在框架中,则fileImg.blur()之后,file控件中原本被选中的文本将会失去选中的状态,因此,不能使用fileImg.blur()。 可以让当前页面上的其他元素,如div,button等获得焦点即可,如div_view.focus()。 注意,如果是div,则要确保div有至少1像素的高和宽,方可获得焦点。 目前在IE9中测试,一切正常。
解决方案:如上,虽然我的是ie9能正常使用,ie78不行,但是获取焦点后同样解决了该问题
相关文章推荐
- 挑战JavaScript正则表达式每日两题(2)
- js,级联替换(图片)
- JSP笔记――9.Listener介绍
- JSP笔记――8.Filter介绍
- jsp页面第一行报错问题
- JSP笔记――7.自定义标签
- JSP笔记――6.Servlet简介
- JSP笔记――5.九个内置对象
- JSP笔记――4.七个动作指令
- JSP笔记――3.JSP的三个编译指令
- JSP笔记――2.四种基本语法
- JSP笔记――1.运行原理
- JS日期格式化
- js一些跳转网页以及自动弹出广告
- 悟透JavaScript
- 《你不知道的JavaScript》读书笔记(一)作用域
- JavaScript操作cookie
- 客户化jsp标签的作用
- JavaScript API 设计原则
- js replace 用法