首先判断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. Leading and Trailing （数论）

    Leading and Trailing https://vjudge.net/contest/288520#problem/E You are given two integers: n and k ...

  2. RxJS之过滤操作符 ( Angular环境 )

    一 take操作符 只发出源 Observable 最初发出的的N个值 (N = count). 如果源发出值的数量小于 count 的话,那么它的所有值都将发出.然后它便完成,无论源 Observa ...

  3. TZOJ 3663 最长路径(floyd)

    描述 网络是由很多交换机与网线组成的,网络中的信息可能会在这些网络中不断转发,给定任意两个交换机,我们需要从中找到最快的路径进行转发,我们定义转发过程中所经过的网线条数为两个交换机之间的路径长度.如果 ...

  4. 【环境配置】本地配置sublime text以及和远程linux设置sftp

    工具: sublime text 2(mac版) 远程linux(centos 7系) securCRT(for mac) [本地安装并配置securCRT(for mac)] 关于配置: 1.解决终 ...

  5. 在别家网站上执行自己的js代码（谷歌浏览器）（谷歌扩展程序）

    @参考文章1  @参考文章2 日前针对一家投标网站进行了程序干预,且一定程度的干预成功,把方法给大家提取分享出来,感谢上述两篇博文 测试网站:百度https://www.baidu.com/ 测试步骤 ...

  6. linux操作Mysql数据库基本命令

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  7. Head First Servlets & JSP 学习笔记 第四章 —— 作为Servlet

    Servlet的任务是得到一个客户的请求,再发回一个响应. 请求: 容器控制着Servlet的一生,它会创建请求和响应对象.为Servlet创建一个新线程或分配一个线程,另外调用Servlet的ser ...

  8. Aspose.words四 bookmark

    通过添加bookmark书签来添加数据,首先通过方法MoverToBookmark移动指定的标签位置,然后添加数据,添加完成后清除掉bookmark标示. string templateFile = ...

  9. 微信小程序解密

    获取OpenId和SessionKey private string GetOpenIdAndSessionKeyString(string code) { string wxUrl = " ...

  10. xslt中substring 函数的用法

    1.函数定义: string substring(string, number, number?) 2.xslt中substring 函数功能: 返回第一个参数中从第二个参数指定的位置开始.第三个参数 ...