兼容最新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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python使用tkinter实现简单计算器
2018/01/30 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
如何在python中执行另一个py文件
2020/04/30 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
综合实践活动总结
2014/05/05 职场文书
会计学专业求职信
2014/07/17 职场文书
委托书的格式
2014/08/01 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
赤壁观后感(2)
2015/06/15 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
为什么不建议在go项目中使用init()
2021/04/12 Golang
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Django实现翻页的示例代码
2021/05/24 Python
Python使用openpyxl批量处理数据
2021/06/23 Python
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis