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

最新推荐文章于 2021-08-03 18:03:01 发布

转载最新推荐文章于 2021-08-03 18:03:01 发布 · 301 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/code-ten/p/5336409.html

本文介绍了在低版本IE浏览器中上传图片时遇到的问题及解决方案，包括客户端和服务器端的方法，旨在帮助开发者解决此类常见技术难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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:拒绝访问。两个解决方案，分别为客户端和服务端出路方案。

一、客户端解决方案

降低IE浏览器Internet的安全级别或者将有问题的网站设置为信任站点。

降低IE浏览器的安全级别方法：

工具 -> Internet选项 -> 安全 -> Internet区域  -> 该区域的安全级别滑块滑到最低

添加信任站点方法：

工具 -> Internet选项 -> 安全 -> 受信任站点区域 -> 站点 -> 输入网址，点击添加按钮

二、服务端解决方案

网上一番搜索之后，找到了低版本的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()报错。

转载于:https://www.cnblogs.com/code-ten/p/5336409.html