input[type='file']选择图片时,IE9及其如下版本浏览器报错

 1 var obj = upfile.value
 2 obj.select();
 3 var imgSrc = document.selection.createRange().text; 
 4 var localImagId = document.getElementById("localImag"); //必须设置初始大小 
 5 try{ //IE滤镜
 6      localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
 7     localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
 8 } catch(e) {
 9     alert("您上传的图片格式不正确,请从新选择!"); 
10     return false; 
11 } 

低版本浏览器报错,显示var imgSrc = document.selection.createRange().text; 这一行有错误。控制台显示错误为:SCRIPT5:拒绝访问。两个解决方案,分别为客户端和服务端出路方案。跨域

1、客户端解决方案
下降IE浏览器Internet的安全级别或者将有问题的网站设置为信任站点。
下降IE浏览器的安全级别方法:
工具 -> Internet选项 -> 安全 -> Internet区域  -> 该区域的安全级别滑块滑到最低

添加信任站点方法:浏览器

工具 -> Internet选项 -> 安全 -> 受信任站点区域 -> 站点 -> 输入网址,点击添加按钮 
2、服务端解决方案
网上一番搜索以后,找到了低版本的IE形成这个问题的缘由:
在IE9下,若是file控件得到焦点,则document.selection.createRange()拒绝访问。
针对这个缘由,可在document.selection.createRange()方法前使file控件失去焦点便可。所以,也有两个方案可选。
方案1:直接使file控件失去焦点
针对本人的代码,可作以下修改
1 var obj = upfile.value
2 obj.select();
3 obj.blur(); //使file控件失去焦点
4 var imgSrc = document.selection.createRange().text; 

方案2:使其余DOM元素得到焦点安全

1 var obj = upfile.value
2 obj.select();
3 OtherDOM.focus(); // 使其余元素得到焦点
4 var imgSrc = document.selection.createRange().text; 

上述两个方案,方案2适用性较好。缘由来自网络,本人还没有验证。网络

由于当网页中存在iframe框架时,会致使跨域的问题,导致obj.blur()报错。
相关文章
相关标签/搜索