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 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
原生js实现九宫格拖拽换位
Jan 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP Document 代码注释规范
2009/04/13 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
Web开发之JavaScript
2012/03/29 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
运动会四百米广播稿
2014/01/19 职场文书
收银员岗位职责
2014/02/07 职场文书
心理学专业求职信
2014/06/16 职场文书
大学生求职信
2014/06/17 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
民事起诉状范文
2015/05/19 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL