这篇文章主要介绍了兼容最新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. java Logger 的使用与配置

    原文来自:http://blog.csdn.net/nash603/article/details/6749914 Logger所对应的属性文件在安装jdk目录下的jre/lib/logging.pr ...

  2. java中String初始化的两种方式

    转自:http://www.diybl.com/course/3_program/java/javajs/2007104/75886.html       字符串可能是任何程序语言中都会出现的对象,j ...

  3. Django的标准库django.contrib包介绍

    原文地址:http://www.nowamagic.net/academy/detail/1318716 前面我们激活了 Django 后台,我们要使用自动化的站点管理工具(django.contri ...

  4. Java-Pi的几种实现

    1.无穷级数计算 p = 1 - 1/3 + 1/5 -1/7+..... π=4p 2.使用 Nilakantha 级数 π = 3 + 4/(2*3*4) - 4/(4*5*6) + 4/(6*7 ...

  5. 一次向linux开源社区提交补丁的经历

    背景 在开发过程中,偶然发现了spinand驱动的一个bug,满怀欣喜地往社区提补丁.这是怎么样的一个bug呢? static int spinand_mtd_read(struct mtd_info ...

  6. 标准C程序设计七---120

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  7. linux信号-------初涉

    一.信号的本质 软中断信号(signal,又简称为信号)用来通知进程发生了异步事件.在软件层次上是对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是进程 ...

  8. dedecms--在后台增加会员添加

    最近在研究dedecms需要前台页面不允许会员注册,而会员帐号是管理员在后台添加的,首先我们得在后台的栏目选项中有会员添加这一栏目: 1:在dede/inc的文件夹下面找到inc_memu.php;找 ...

  9. PostgreSQL 二进制安装

    一.安装前准备工作 新建用户 sudo groupadd sql sudo useradd -g sql postgressudo passwd postgres 创建数据及日志目录,并做相应授权 s ...

  10. Codeforces 600E Lomsat gelral （树上启发式合并）

    题目链接 Lomsat gelral 占坑……等深入理解了再来补题解…… #include <bits/stdc++.h> using namespace std; #define rep ...