首先判断IE或是Firefox,chrome。本文只测试了IE8中和Firefox,chrome是不一样的。

判断是否IE：

if(-[1,]){//判断浏览器不是IE
    //alert((-[1,]?"不":"")+"是ie");
    var oFReader = new FileReader();
    oFReader.onload = function(e) {
        document.getElementById("imageMark").src = e.target.result;
    }
    if (document.getElementById("fileMark").files.length === 0) { return; }
    var oFile = document.getElementById("fileMark").files[0];
    oFReader.readAsDataURL(oFile);
    imageStatus = true;
}else{//判断浏览器是IE

......

}

下面是两个火狐下上传的例子：

例一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=GBK" http-equiv="Content-Type" />
<title>Image preview example</title>
<style type="text/css">
div {width:100px;height:100px;border: 1px #A3BFE7 solid;}
img {width:atuo;height:atuo;}
</style>
<script type="text/javascript">
function viewPic() {
var oFReader = new FileReader();
oFReader.onload = function(e) {

document.getElementById("uploadPreview").src = e.target.result;
}
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body>

<input id="uploadImage" type="file" name="myPhoto" onchange='viewPic();'/><br>
<img id="uploadPreview" src=""/>

</body>
</html>

例二：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#img_prev').attr('src', e.target.result).width(150).height(200);
};

reader.readAsDataURL(input.files[0]);
}
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>

Firefox,chrome,IE上传图片预览的更多相关文章

  1. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  2. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  3. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  4. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  5. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  6. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  7. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  8. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  9. 上传图片预览，支持IE6

    //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片固定大小容器的高 //imgDiv ...

随机推荐

  1. FZU-2150.FireGame.(BFS))

    本题大意:给出一个n * m的地,‘#’ 代表草, ‘.’代表陆地,每次选择这片地里的两片草,可选相等的草,选择的两片草初始状态为被燃状态,每一分钟被点燃的草会将身边的四连块点.问你需要对于给定的这片 ...

  2. TOJ2811: Bessie's Weight Problem（完全背包）

    传送门(<---可以点的) 描述 Bessie, like so many of her sisters, has put on a few too many pounds enjoying t ...

  3. GIRDVIEW 控件绑定数据后 后台c#控制隐藏某列

    gv_EnterpriseInfo.DataSource = pageResult.Data; gv_EnterpriseInfo.DataBind(); 之后加判断条件: if (true) { g ...

  4. Ionic后退刷新

    版本:Angular 1.5.3.Ionic1.3.2 一 禁用缓存,全页面刷新. 每次前进/ 后退时,控制器都会执行. 1 AngularJS ui-router路由禁用缓存 var app = a ...

  5. 【Linux 系统】Linux探秘之用户态与内核态

    一. Unix/Linux的体系架构 如上图所示,从宏观上来看,Linux操作系统的体系架构分为用户态和内核态(或者用户空间和内核).内核从本质上看是一种软件——控制计算机的硬件资源,并提供上层应用程 ...

  6. 线特征---LBD算法（三）

    上一节主要是介绍LSD算法理论,这节主要是介绍LBD算法. 参考文章:An efficient and robust line segment matching approach based on L ...

  7. Bootstrap 框架 day57

    Bootstrap框架  Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...

  8. oracle表或视图不存在和标识符无效的问题解决

    通过dbvisualizer修改表的名字时,一定要改成大写,否则会报错,数据库中没有该表的错误. 如果新的表名为小写,不行! select的时候,可以用小写名. 标识符无效解决:字段名默认都是大写的, ...

  9. BZOJ1178或洛谷3626 [APIO2009]会议中心

    BZOJ原题链接 洛谷原题链接 第一个问题是经典的最多不相交区间问题,用贪心即可解决. 主要问题是第二个,求最小字典序的方案. 我们可以尝试从\(1\to n\)扫一遍所有区间,按顺序对每一个不会使答 ...

  10. Luogu 1169 [ZJOI2007]棋盘制作 - 动态规划+单调栈

    Description 给一个01矩阵, 求出最大的01交错的正方形和最大的01交错的矩阵 Solution 用动态规划求出最大的正方形, 用单调栈求出最大的矩阵. 在这里仅介绍求出最大正方形(求最大 ...