这篇文章主要介绍了兼容最新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. @login_required用法简介

    在django项目中,经常会看到下面这样的代码: from django.contrib.auth.decorators import login_required @login_required d ...

  2. 2018.8.6 Noip2018模拟测试赛（十九）

    日期: 八月六号  总分: 300分  难度: 提高 ~ 省选    得分: 10分(MMP) 题目目录: T1:Tree T2:异或运算 T3:Tree Restoring 赛后反思: Emmmmm ...

  3. JS函数(自调函数)与闭包【高级函数】

    JavaScript:BOM(浏览器对象)+DOM(文档对象)+ECMAScript javascript面向对象: * 概述: * 发展: * 互联网发展对浏览器页面性能或效果要求越来越高,HTML ...

  4. Linux 虚拟内存和物理内存的理解【转】

    转自:http://www.cnblogs.com/dyllove98/archive/2013/06/12/3132940.html 首先,让我们看下虚拟内存: 第一层理解 1.         每 ...

  5. 23深入理解C指针之---数组的基础

    数组是c语言内置的数据结构,数组有一维数组.二维数组和多维数组.使用数组传递数组时,必须传入数组的大小. 一.数组的特征:阐明数组的特点 1.数组要素: 1).数组类型:数组中存储的数据的类型: 2) ...

  6. Codeforces 553D Nudist Beach（二分答案 + BFS）

    题目链接 Nudist Beach 来源  Codeforces Round #309 (Div. 1) Problem D 题目大意: 给定一篇森林(共$n$个点),你可以在$n$个点中选择若干个构 ...

  7. OceanBase分区表有什么不同？

    概述 分区表是ORACLE从8.0开始引入的功能,也是第一个支持物理分区的数据库,随后其他数据库纷纷跟进.分区表是一种“分而治之”的思想,通过将大表.索引分成可以独立管理的.小的片段(Segment) ...

  8. 左偏树 / 非旋转treap学习笔记

    背景 非旋转treap真的好久没有用过了... 左偏树由于之前学的时候没有写学习笔记, 学得也并不牢固. 所以打算写这么一篇学习笔记, 讲讲左偏树和非旋转treap. 左偏树 定义 左偏树(Lefti ...

  9. python 常用库, 随时添加中

    python只有你想不到的库,只要你能想到,肯定有对应的库 前面*的为标准库,**的是pip里面的,***则是要手动安装的1)python运行时服务* copy: copy模块提供了对复合(compo ...

  10. SilverLight：布局（3）StackPanel 对象

    ylbtech-SilverLight-Layout: 布局(3)StackPanel 对象 A, Nesting Layout Containers(内嵌布局容器) B, StackPanel(队列 ...