手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js 上传图片预览问题
js 上传图片预览问题
摘要:最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是...

最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助。

我们一般根据IE6、IE7进行开发的时候写图片预览的代码是:

复制代码 代码如下:

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

还有一种方式

复制代码 代码如下:

<div id="div1"></div>

<script type="javascript">

document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value;

</script>

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();

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

【js 上传图片预览问题】相关文章:

javascript瀑布流式图片懒加载实例

解决 FireFox 下[使用event很麻烦] 的问题.

onmousewheel event 缩放图片效果

js验证上传图片的方法

js兼容火狐获取图片宽和高的方法

js对象和json对象互相转换的问题

javascript制作的滑动图片菜单

解决未知尺寸的图片撑破页面的问题

jQuery预加载图片常用方法

JavaScript中eval函数的问题

精品推荐
分类导航