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 相关文章推荐
js的event详解。
Sep 06 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JSONP解决JS跨域问题的实现
May 25 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 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
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php常用正则函数实例小结
2016/12/29 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
浅谈Angular路由复用策略
2017/10/04 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python魔术方法详解
2015/02/14 Python
解析Python中的异常处理
2015/04/28 Python
python os用法总结
2018/06/08 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
四查四看剖析材料
2014/02/14 职场文书
推荐信格式要求
2014/05/09 职场文书
企业员工薪酬方案
2014/06/04 职场文书
开场白怎么写
2015/06/01 职场文书
导游词之桂林山水
2019/09/20 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技