首先判断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. 如何彻底卸载mysql（xp）

    如何彻底卸载mysql 完整的卸载MySQL 5.x 的方法: 1.控制面板里的增加删除程序内进行删除 2.删除MySQL的安装文件夹C:\Program Files\MySQL,如果备份好,可以直接 ...

  2. 再谈AR中的图像识别算法

    之前在<浅谈移动平台创新玩法>简单的猜测了easyar中使用的图像识别算法,基于图片指纹的哈希算法的图片检索 .后再阿里引商大神的指点下,意识到图片检测只适用于静态图片的识别,只能做AR脱 ...

  3. vue-layer

    npm:  https://www.npmjs.com/package/vue-layer 原文:https://www.cnblogs.com/myIvan/p/9564502.html 1.安装 ...

  4. HDU 1698 Just a Hook(线段树区间更新查询)

    描述 In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of the heroes ...

  5. day 18 类，对象

    类,对象: 类 具有相似功能的一类事物,人类,犬类,猫类等等. 对象: 类的具体表现 面向对象: 1.第一个优点:面向对象是一类相似功能函数的集合体 更清晰化,更规范化 class LoginHand ...

  6. webpack(二） 根据模板生成简单的html文件

    (一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plug ...

  7. 在eclipse上写代码的时候，tomcat突然不能用了，重启都是闪一下就关了

    严重: A child container failed during start 严重: The required Server component failed to start so Tomca ...

  8. 41-ssm中对象查找正确但是没有将数据库中某个属性值赋给对象的一个成员变量

    原因: 变量名虽然与 数据库字段一致,但是 包含下划线,如: a_b,数据库确实也是a_b: 但是ssm开启驼峰命名了,就要将变量名改为   aB , 驼峰命名就可以了.

  9. 函数 day9

    一,什么是函数? 函数的定义与调用 s = 'fkdsagadfdsagfdsagg' count = 0 for i in s: count += 1 print(count) l1 = [1,2, ...

  10. Java运算符号，对象赋值，别名

    生活发生的一切,才会促使着我继续前行,今天继续更新哦,看书中的代码练习. 例子1  引入net.mindview.util.Print.* ,方便打印结果. package com.date0529; ...