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代码
Mar 26 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
微信小程序实现录音功能
Nov 22 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
js同源策略详解
2015/05/21 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Django如何配置mysql数据库
2018/05/04 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python自动点赞功能的实现思路
2020/02/26 Python
戴尔美国官网:Dell
2016/08/31 全球购物
反洗钱宣传活动总结
2014/08/26 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python 循环读取数据内存不足的解决方案
2021/05/25 Python