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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 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
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
基于PHP制作验证码
2016/10/12 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
BootStrap中
2016/12/10 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python requests模块实例用法
2019/02/11 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
Java中实现多态的机制
2015/08/09 面试题
商得四方公司面试题(gid+)
2014/04/30 面试题
制衣厂各岗位职责
2013/12/02 职场文书
项目专员岗位职责
2013/12/04 职场文书
教育专业自荐书范文
2013/12/17 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
贷款担保申请书
2014/05/20 职场文书
工地标语大全
2014/06/18 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书