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实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
兼容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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
angularJS 入门基础
2015/02/09 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
颐和园的导游词
2015/01/30 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python