js 上传图片预览问题_图象特效-js教程-PHP中文网

js 上传图片预览问题_图象特效

php中文网

发布： 2016-05-16 18:14:33

原创

1015人浏览过

最近也经常遇到浏览器兼容的问题，昨天遇到上传图片预览问题，发现IE8和火狐不能显示，弄了很久，早上终于解决了很高兴。故跟大家分享下，我也多是网上找的，自己总结的一下，希望对大家有点帮助。
　　我们一般根据IE6、IE7进行开发的时候写图片预览的代码是：

jQuery多图片上传预览特效

查看详情

复制代码代码如下:

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

　　还有一种方式

复制代码代码如下:

IE8
　　在IE8和火狐上直接用户控件.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; 
} 

火狐
　　在火狐上问题很多，在网上找了很多东西都无法实现，首先要获得
在火狐上问题很多，在网上找了很多东西都无法实现。
　　1。首先要获得上传问题的完整路径，用下面的方法是可以得完整路径

复制代码代码如下:

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

　　2。但直接这样给图片修改路径(src)没有反应，后来发现有人说要在火狐显示本地图片要在前面加"file:///"

复制代码代码如下:

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

　　这样如果是页面上放个图片是可以显示，不过前提条件是不能放在IIS上，我的网站是部署在IIS上的这样就算我直接放个图片地址是本地图片也显示不了，所有我有本郁闷到了，而且很多人都说火狐有安全设置不能预览本地图片，我差点就放弃了。
　　最后在网上在到一个可以预览的例子，仔细分析发现原来要在火狐上实现预览图片其实代码也很简单：

复制代码代码如下:

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

　　我把它的路径弹出了看，发现是一串很长的东西，好像是制定的图片类型等等，不过总算是解决了

大家都在看：

JavaScript文件操作_Blob对象与流式读取方案 JavaScript动态修改图片src属性：常见路径问题与解决方案 JavaScript 条件判断与图片切换：避免常见if-else陷阱 Apache ECharts 标题样式：文本颜色与阴影效果的精确配置解决JavaScript动态修改图片src属性后图片不显示的问题