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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
js 走马灯简单实例
Nov 21 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 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写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
用python解压分析jar包实例
2020/01/16 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
致跳远、跳高运动员广播稿
2014/01/09 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
大家检讨书5000字
2014/02/03 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
小学德育工作总结2015
2015/05/12 职场文书
国庆节新闻稿
2015/07/17 职场文书
外出听课学习心得体会
2016/01/15 职场文书
python如何查找列表中元素的位置
2022/05/30 Python