js 上传图片预览问题


Posted in Javascript onDecember 06, 2010

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

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

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

还有一种方式

<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和火狐上直接用户控件.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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 #Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 #Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 #Javascript
jquery实现心算练习代码
Dec 06 #Javascript
初窥JQuery(二)事件机制(2)
Dec 06 #Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
jquery提升性能最佳实践小结
Dec 06 #Javascript
You might like
PHP新手上路(九)
2006/10/09 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php格式化时间戳
2016/12/17 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
解析Python中的异常处理
2015/04/28 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
如何在Python对Excel进行读取
2020/06/04 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
计算机专业个人求职自荐信
2013/09/21 职场文书
元旦晚会邀请函
2014/01/27 职场文书
求职信名称怎么写
2014/05/26 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers