兼容最新firefox、chrome和IE的javascript图片预览实现代码


Posted in Javascript onAugust 08, 2014

javascript实现客户端file选择文件后img标签加载客户端图片实现图片预览。

测试浏览器:firefox6,firefox12,chrome 25.0.1364.172 m,IE6-IE10 都兼容

safari5.0.4不支持FileReader和file.files.item(0).getAsDataURL方法,暂时无解,需要上传到服务器后返回临时文件名用img标签加载,不知道后续的safari版本是否支持FileReader对象。

IE10下效果:

兼容最新firefox、chrome和IE的javascript图片预览实现代码

IE9下效果:

兼容最新firefox、chrome和IE的javascript图片预览实现代码

实现源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="txt/html;charset=utf-8" />
<title>javascript实现IE,firefox客户端图片预览</title>
<script>
 //使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确
 if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true<\/script><![endif]-->');
 // var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8
 function change(picId,fileId) {
  var pic = document.getElementById(picId);
  var file = document.getElementById(fileId);
  if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
   oFReader = new FileReader();
   oFReader.readAsDataURL(file.files[0]);
   oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};  
  }
  else if (document.all) {//IE8-
   file.select();
   var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
   if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
   else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
    pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
    pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片,要不会显示红xx
   }
  }
  else if (file.files) {//firefox6-
   if (file.files.item(0)) {
    url = file.files.item(0).getAsDataURL();
    pic.src = url;
   }
  }
 }
</script>
</head>
<body>
<form name="form1" enctype="multipart/form-data"><table><tr>
<td> 草图1:</td>
<td >
<input type="file" name="file1" id="file1" onchange="change('pic1','file1')">
</td>
<tr>
<td>草图浏览1:</td>
<td>
<img src="images/px.gif" id="pic1" >
</td></tr><tr>
<td> 草图2:</td>
<td >
<input type="file" name="file2" id="file2" onchange="change('pic2','file2')">
</td>
<tr>
<td>草图浏览2:</td>
<td>
<img src="images/px.gif" id="pic2" >
</td></tr>
</table>
</form>
</body>
</html>
Javascript 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 #Javascript
JS创建类和对象的两种不同方式
Aug 08 #Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 #Javascript
jquery datatable后台封装数据示例代码
Aug 07 #Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 #Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 #Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
JS动画效果代码3
2008/04/03 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
详细分析JS函数去抖和节流
2017/12/05 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python发布模块的步骤分享
2014/02/21 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
详细介绍Python中的偏函数
2015/04/27 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python实现简单日期工具类
2019/04/24 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python如何建立全零数组
2020/07/19 Python
详解python 内存优化
2020/08/17 Python
python如何调用百度识图api
2020/09/29 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
法律专业实习鉴定
2013/12/22 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
用人单位聘用意向书
2015/05/11 职场文书