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与flash交互通信基础教程
Aug 07 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
详解React之key的使用和实践
Sep 29 Javascript
JS数组的常用方法整理
Mar 31 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
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python八皇后问题的解决方法
2018/09/27 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
vscode调试django项目的方法
2020/08/06 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
团队拓展活动总结
2014/08/27 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
体检通知范文
2015/04/21 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
redis数据一致性的实现示例
2022/03/18 Redis