这篇文章主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下

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对象。

<!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="data: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="data:images/px.gif" id="pic2" >

</td></tr>

</table>

</form>

</body>

</html>

兼容最新firefox、chrome和IE的javascript图片预览实现代码的更多相关文章

  1. JavaScript图片预览

    预览选中的图片文件 jQuery $("#selectImage").change(function(){ $("#image").attr("src ...

  2. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  3. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  5. javascript 实现图片预览（未上传到服务器端）

    1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...

  6. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  8. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  9. Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. [暑假集训--数论]poj2657 Comfort

    Description A game-board consists of N fields placed around a circle. Fields are successively number ...

  2. HDU1936 [贪心+KMP] 点的区间覆盖

    每一行对话分别取匹配所有的表情 这样是一个n**2的匹配,可以用KMP 找出每行对话中的每个表情的左右端点 这样相当于就是问用最少多少个点 可以覆盖所有的区间(每个区间中放一个点表示覆盖) 贪心 按右 ...

  3. poj 3168 Barn Expansion

    Barn Expansion Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2465   Accepted: 666 Des ...

  4. 【CF1017A】The Rank（签到）

    题意:给定n个人的4门课成绩,排名按总分,保证总分互不相同,求1号名次 n<=1e3,a[i],b[i],c[i],d[i]<=1e2 思路: #include<cstdio> ...

  5. 转 php simple test

    转自 后期移至 以下为汪大哥写的 yunlian服务监控 如何写监控代码 首先在tests目录下新建一个文件xxx.php.其中xxx为你的服务名. class XxxTestCase extends ...

  6. HDU 4722:Good Numbers（数位DP）

    类型:数位DP 题意:定义一个Good Number 为 一个数所有位数相加的和%10==0.问[A,B]之间有多少Good Number. 方法: 正常“暴力”的定义状态:(i,d,相关量) 定义d ...

  7. java mail Received fatal alert: handshake_failure java 无法发送邮件问题 java 发送qq邮件（含源码）

     java 无法发送邮件问题 java 发送qq邮件 报错:java mail Received fatal alert: handshake_failure (使用ssl) javax.mail.M ...

  8. python--导入就方便实现你需要的功能（模块）

    模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 简单地说,模块就是一个保存了 ...

  9. IDEA重新打jar包时报错MANIFEST.MF already exists in VFS

    报错原因:曾经打过jar包了,把之前的包删掉无用,VFS:虚拟文件系统.即使删掉之前的包,信息依然会在此处.故删掉MANIFEST文件夹,重新打包即可解决.

  10. gitlab升级、汉化、修改root密码

    1.gitlab升级 # 查看当前版本 head -1 /opt/gitlab/version-manifest.txt gitlab-ce 8.9.5 grep "^external_ur ...