JavaScript图片上传前的图片预览功能
来源:互联网 发布:推荐信 出国留学 知乎 编辑:程序博客网 时间:2024/05/18 18:42
JS代码:
遇到问题:ie8及以下document.selection.createRange()拒绝访问,导致图片无法预览的问题
解决方案:如上,虽然我的是ie9能正常使用,ie78不行,但是获取焦点后同样解决了该问题
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3function 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不行,但是获取焦点后同样解决了该问题
0 0
- JavaScript图片上传前的图片预览功能
- 利用JavaScript预览上传前的图片
- JavaScript 图片的上传前预览
- javascript上传前图片预览
- JavaScript上传图片前预览
- JavaScript 图片上传前预览
- JavaScript图片上传前预览
- 在上传图片前,提供预览功能(Javascript)
- JavaScript 上传图片前本地预览图片
- javascript 上传图片前预览图片
- javascript 上传图片前预览图片
- 上传图片前的预览
- 上传图片前的预览
- 图片上传前的预览
- 上传图片前的预览
- 在上传图片前,提供预览功能
- javascript实现上传图片前的预览效果
- JavaScript 图片的上传前预览(兼容所有浏览器)
- Media PlayBack 媒体的后台播放
- ios 6 和 ios7 布局区别
- eclipse (ADT) svn插件 过滤上传的 文件 文件夹 一劳永逸
- 公有ip地址 和内网ip地址
- Android UI设计——ViewPage中PagerTabStrip与PagerTitleStrip添加标题栏(三)
- JavaScript图片上传前的图片预览功能
- 中断处理函数
- OpenGL GLSL访问纹理
- android里.getText().tostring()怎么用
- 聚类算法与贪心算法
- IOS deletate assign
- hdu 1202 The calculation of GPA
- 归并排序
- 开发中多条件搜索是使用StringBuilder创建sql语句