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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
vue微信分享插件使用方法详解
Feb 18 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实现快速排序的三种方法分享
2014/03/12 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php实现微信发红包
2015/12/05 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
一个实用的php验证码类
2017/07/06 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
详解python上传文件和字符到PHP服务器
2017/11/24 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
小加工厂管理制度
2014/01/21 职场文书
员工晚婚的请假条
2014/02/08 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
2014年团支部工作总结
2014/11/17 职场文书
爱心捐助活动总结
2015/05/09 职场文书
卖车协议书范文
2016/03/23 职场文书