这篇文章主要介绍了兼容最新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. vue.js源码学习分享（八）

    /* */ var uid$1 = 0; /** * A dep is an observable that can have multiple * directives subscribing() ...

  2. json键的不能像值一样拼写的问题

    今天碰到了一个json的键不能拼写的问题 解决方法是  先把json对象作为一个字符串拼写  然后再通过eavl函数转为json对象 $(".select_date").each( ...

  3. WEB学习-兼容问题

    css选择器 儿子选择器 (IE7开始兼容,IE6不兼容.) div>p{ color:red; } div的儿子p.和div的后代p的截然不同. 能够选择: <div> <p ...

  4. HDU 6206 Apple

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6206 判断给定一点是否在三角形外接圆内. 给定三角形三个顶点的坐标,如何求三角形的外心的坐标呢? 知乎 ...

  5. Codeforces Gym101572 J.Judging Moose (2017-2018 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2017))

     Problem J Judging Moose 这个题是这里面最简单的一个题... 代码: 1 //J 2 #include <stdio.h> 3 #include <math. ...

  6. 洛谷—— P1134 阶乘问题

    https://www.luogu.org/problemnew/show/P1134 题目描述 也许你早就知道阶乘的含义,N阶乘是由1到N相乘而产生,如: 12! = 1 x 2 x 3 x 4 x ...

  7. 用LCT解一类动态图的问题

    很显然,学过了LCT,大家一定都会用LCT来维护动态树结构了 那么,遇到图问题的时候,是不是也能用lct来解决呢? 解决图问题的时候,我们必须要仍然维护一棵树的形态,否则,lct是做不动的 那么下面来 ...

  8. 554 DT:SPM 163 smtp5,D9GowAD3RPYqSvxZjpMaAA--.4817S2 1509706293 坑爹的防垃圾邮件机制

    代码如下 package ssmtest; import java.io.File;import java.io.UnsupportedEncodingException;import java.ut ...

  9. 【bootstrap】Bootstrap Notify的使用步骤

    Bootstrap Notify说明文档:http://bootstrap-notify.remabledesigns.com/ Bootstrap Notify的GitHub地址:https://g ...

  10. Android 存储（本地存储 SD卡存储 SharedPreference SQLite ContentProvider）

    本文出自:http://blog.csdn.net/dt235201314/article/details/73176149 源码下载欢迎Star(updating):https://github.c ...