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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
js浮动图片的动态效果
Jul 10 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
jquery replace方法去空格
May 08 jQuery
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 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隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
2014年圣诞节促销方案
2014/03/14 职场文书
校园演讲稿汇总
2014/05/21 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
房贷工资证明范本
2015/06/12 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
五年级作文之学校的四季
2019/12/05 职场文书