首先判断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. 188. Best Time to Buy and Sell Stock IV (Array; DP)

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  2. Intent Activity跳转 传递数据 Bundle

    1.普通跳转: Intent intent=new Intent(); intent.setClass(MainActivity.this,NewActivity.class); //新建一个Inte ...

  3. java深拷贝与浅拷贝

    1.调用Object类的clone方法必须实现Cloneable接口,clone属于浅拷贝. 2.可以通过java的反序列化机制进行深拷贝. 3.可以直接用apache提供的一些包进行深拷贝和浅拷贝, ...

  4. ViewResolver和JSTL

    ---------------------siwuxie095                                 ViewResolver 和 JSTL         1.Spring ...

  5. jquery--blur()事件，在页面加载时自动获取焦点

    jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...

  6. Kylin Cube构建过程优化

    原文地址:https://kylin.apache.org/docs16/howto/howto_optimize_build.html Kylin将一个cube的build过程分解为若干个子步骤,然 ...

  7. SSKeychain

    SSKeyChains对苹果安全框架API进行了简单封装,支持对存储在钥匙串中密码.账户进行访问,包括读取.删除和设置.SSKeyChain的作者是大名鼎鼎的SSToolkit的作者samsoffes ...

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

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

  9. js计算日期增加

    <div class="time"> <i class="visa_icon prev"></i><span id=& ...

  10. ListView的自定义适配器及其优化(listView序号混乱问题的处理)

    ListView是最常使用的android组件之一,关于listView的优化问题刚刚了解了一些,在这里做出总结. PS:如果想让ListView中的item根据数据内容显示item的大小,需要在it ...