Firefox,chrome,IE上传图片预览
首先判断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上传图片预览的更多相关文章
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- 去除ckeditor上传图片预览中的英文字母
去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...
- HTML5 上传图片预览
html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...
- 上传图片预览，支持IE6
//说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片固定大小容器的高 //imgDiv ...
随机推荐
- TOJ4439微积分――曲线积分（数学，模拟）
传送门:点我 格林公式P,Q为关于x,y的函数. 现在为了方便起见,现给出x的积分上限1,积分下限0, y的积分上限x,积分下限0. P只是关于Y的函数,Q只是关于X的函数. 输入 开始输入为测试组数 ...
- 199. Binary Tree Right Side View (Tree, Stack)
Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...
- 前端框架（kraken、Express、Node、MVC）
You know my loneliness is only kept for you, my sweet songs are only sang for you. 前端框架相关知识记录. krake ...
- FortiGate密码恢复
1.需求 1.若设备的密码忘记,需要用配置线进行密码恢复: 2.密码恢复需要重启设备,并在设备的底层菜单界面上操作,会造成网络中断,请在方便断网时操作: 3.密码恢复后配置不会改变. 2.操作步骤 1 ...
- cf相关命令
进行登录的命令: cf login -a https://api.bupaas.citicsinfo.com --skip-ssl-validation 进行发布的命令: cf push gwdemo ...
- VS2013中Nuget程序包管理器控制台使用入门（一）-准备环境（原创）
准备环境: 1.打开VS2013IDE集成开发环境. 2.新建一个Asp.net Mvc的项目,比如命名为:MvcApplication1 3.打开 菜单"工具"->&quo ...
- Informatica_(2)第一个例子
PowerCenter Repository Manager1.启动客户端程序连接服务器打开客户端(PowerCenter Repository Manager)PCRM;存储库--配置域--添加新域 ...
- Oracle_SQL(2) 分组与聚合函数
一.聚合函数1.定义:对表或视图的查询时,针对多行记录只返回一个值的函数.2.用途:用于select语句,HAVING条件二.5种聚合函数1.SUM(n) 对列求和 select sum(sal) f ...
- Event 事件
事件是建立在委托的基础之上的. http://www.cnblogs.com/lystory/p/5085786.html public class 事件参数 { public 事件参数(string ...
- 理解String拼接，+运算符重载的实际效果
引申:一个常见的String的面试题 public static void main(String[] args) { // TODO Auto-generated method stub Strin ...