这篇文章主要介绍了兼容最新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. php 爬取网页列表 QueryList

    主流的方式是 phpQuery 今天使用了 QueryList,是在PHPQuery的基础上进行了封装,现在最新的版本是4.0,但是要求PHP>7.0.就用了旧版的3.0 3.0文档:https ...

  2. 怎样抓获或忽略像control-C这样的键盘中断？

    基本步骤是调用signal():#include <signal.h>singal(SIGINT, SIG_IGN); 就可以忽略中断信号, 或者:extern void func(int ...

  3. UVa1073 Glenbow Museum

    可以把R看成顺时针转90°,O看成逆时针转270° 设R有x个,则180*(n-2)=90*x+270*(n-x) 解得R有(n+4)/2个 O有(n-4)/2个 所以n<4或者n是奇数时无解. ...

  4. grunt 入门 应用grunt对代码进行压缩

    1.什么是grunt grunt的官方解释是:javascript世界的构建工具. 为何要构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.li ...

  5. Yii关联查询(转载)

    原文链接:http://keshion.iteye.com/blog/1607994 一.多表关联的配置 在我们使用 AR 执行关联查询之前,我们需要让 AR 知道一个 AR 类是怎样关联到另一个的. ...

  6. java string中indexOf()常用用法

    Java中字符串中子串的查找共有四种方法,如下: 1.int indexOf(String str) :返回第一次出现的指定子字符串在此字符串中的索引. 2.int indexOf(String st ...

  7. [深入学习C#]C#实现多线程的方式：Task——任务

    简介 .NET 4包含新名称空间System.Threading.Tasks,它 包含的类抽象出了线程功能. 在后台使用ThreadPool. 任务表示应完成的某个单元的工作. 这个单元的工作可以在单 ...

  8. 转载：Flappy Bird源代码 win32 console版

    #include"StdAfx.h" #include<stdio.h> #include<stdlib.h> #include<conio.h> ...

  9. 利用github搭建个人网站

    1.注册一个github  https://github.com/ 2.新建一个仓库  仓库名 用 Owner.github.io 的格式,然后点击创建 3.源码上传至github 安装github桌 ...

  10. 第4章 CentOS软件安装

    一.安装JDK 1.1 卸载旧版JDK 首先,在你的服务器上运行一下更新. yum update 然后,在您的系统上搜索,任何版本的已安装的JDK组件. rpm -qa | grep -E '^ope ...