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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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类
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
javascript json 新手入门文档
2009/12/03 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Node爬取大批量文件的方法示例
2019/06/28 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Django Highcharts制作图表
2016/08/27 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python流程控制 while循环实现解析
2019/09/02 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python 利用toapi库自动生成api
2020/10/19 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
linux面试题参考答案(5)
2014/09/01 面试题
关于毕业的广播稿
2014/01/10 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
企业文化口号
2014/06/12 职场文书
消防志愿者活动方案
2014/08/23 职场文书
推普周活动总结
2014/08/28 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
现实表现证明材料
2015/06/19 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript