首先判断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. 对于装office 365时，visio不兼容的解决

    先将office 365装好,之后从这个网址下载visio安装即可,但是没有 激活码,需要自己激活: 网址:链接: https://pan.baidu.com/s/1OqONPuJ0eumrpts-X ...

  2. 微信小程序接入百度统计

    一. 百度统计添加应用,获取appkey和微信小程序统计sdk: 1. 百度统计首页,点击“我的全部应用”右侧的添加按钮: 2. “应用类型”选择小程序统计,选择微信小程序,填写应用名称信息,选择内容 ...

  3. vue 添加子路由，并对路由重定向

    // 用户信息首页 { path: '/user/index', name: 'userIndex', component: userIndex, redirect: '/user/index/sho ...

  4. label 和input/textarea居中对齐

    设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐

  5. 《基于Nginx的中间件架构》学习笔记---1.环境配置

    一.环境调试确认 (四项确认) 1.确认系统网络 ping www.baidu.com 2.确认yum可用 yum list|grep gcc 3.确认关闭iptables规则 iptables -L ...

  6. C++ 智能指针shared_ptr的实现

    #include <memory> #include <iostream> using namespace std; template<typename T> cl ...

  7. 手动获取被spring管理的bean对象工具

       在netty handler开发中,我们无法将spring的依赖注入到Handler中,无法进行数据库的操作,这时候我们就需要手动获取被spring管理的bean对象:    创建一个  imp ...

  8. Java使用点滴

    1.查找某个字符在字符串中第几次出现的位置 /** * 查找某个字符在字符串中第几次出现的位置 * @param string 要匹配的字符串 * @param i 第几次出现 * @param ch ...

  9. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  10. 43-将javaweb项目部署到Linux服务器

    这是第二次弄了,感觉由于上次积累了点资源,这次要少走很多弯路了,再次记录下来吧. 第一次的记录:将本地的javaweb项目部署到Linux服务器的一般操作 1. 在Linux上建立数据库,我是将本地的 ...