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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
jquery form 加载数据示例
Apr 21 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
js中的面向对象入门
Mar 06 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
javascript实现前端成语点击验证优化
Jun 24 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python matlibplot绘制3D图形
2018/07/02 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python猴子补丁知识点总结
2020/01/05 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
24岁生日感言
2014/01/13 职场文书
商场活动策划方案
2014/01/24 职场文书
网络编辑职责
2014/03/01 职场文书
一年级班主任感言
2014/03/08 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
普通话宣传标语
2014/06/26 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库