兼容最新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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
js选项卡的制作方法
Jan 23 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
JavaScript接口实现方法实例分析
May 16 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
php的ajax简单实例
2014/02/27 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
浅析python协程相关概念
2018/01/20 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
HTML5进度条特效
2014/12/18 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
Java面试题及答案
2012/09/08 面试题
《李广射虎》教学反思
2014/04/27 职场文书
《恐龙》教学反思
2014/04/27 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
交通事故责任认定书
2015/08/06 职场文书
团支部书记竞选稿
2015/11/21 职场文书