解决IE8与Firefox浏览器图片上传预览兼容性问题

近期开发中常遇到浏览器兼容挑战，昨日在处理图片上传预览功能时，发现IE8和Firefox浏览器无法显示预览图。经过长时间调试，今早终于找到解决方案，特此整理分享，内容主要参考网络资料并结合个人总结，希望能对遇到类似问题的开发者有所帮助。

IE6/7及IE8图片预览解决方案

在针对IE6和IE7进行开发时，通常采用的图片预览代码逻辑如下：

 
document.getElementById("img").src = document.getElementById("file").value;

此外，还存在另一种针对IE的替代方案：

 
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:300px; height:300px;" id="div1"></div>
<script type="javascript">
document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value;
</script>

针对IE8的处理

在IE8和Firefox浏览器中，直接通过控件.value属性获取的仅是文件名，而非完整的本地文件路径，导致预览失败。

 
var isIE = (document.all) ? true : false;
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
var file = document.getElementById("file");
if (isIE7 || isIE8) {
file.select();
img = document.selection.createRange().text;
document.selection.empty();
document.getElementById("img").src = img;
} 

Firefox浏览器图片预览兼容处理

针对Firefox的处理

Firefox浏览器下的实现较为复杂，网上资料较少且难以直接实现。首先需要获取上传文件的完整路径。

在Firefox上实现该功能存在诸多障碍，网上搜索到的方案大多无法直接奏效。

第一步，需获取上传文件的完整路径，以下方法可尝试获取：

 
if (navigator.userAgent.indexOf("Firefox") != -1) {
try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
} 
img = document.getElementById("file").value;
　　} 

第二步，直接修改图片src属性往往无效。有观点指出，在Firefox中显示本地图片需在路径前添加"file:///"前缀。

 
if (!document.all) {
img = img.replace(/\\/g, "/");
img = "file:///" + img
} 

若页面直接放置本地图片，此方法可能生效。但前提是网站未部署在IIS服务器上。由于我的网站部署在IIS上，即使直接指定本地图片地址也无法显示。因此，尽管有人声称Firefox因安全设置禁止预览本地图片，我仍感到困惑并几乎放弃。

最终在网上找到一个可行的预览示例，经分析发现，在Firefox上实现图片预览的代码其实相当简洁：

 
document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();

通过弹窗查看该路径，发现其为一长串包含图片类型等信息的数据字符串，但至此问题已得到解决。