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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 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 swfupload图片上传的实例代码
2013/09/30 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
理解javascript对象继承
2016/04/17 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
vue Render中slots的使用的实例代码
2017/07/19 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
Python连接Redis的基本配置方法
2018/09/13 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python实现微信表情包炸群功能
2021/01/28 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
给上级领导的感谢信
2015/01/22 职场文书
离婚协议书范文2015
2015/01/26 职场文书
个人思想政治总结
2015/03/05 职场文书
小学数学国培研修日志
2015/11/13 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python