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 ...
随机推荐
- vcenter或workstation12导入ovf出错：硬件系列vmx 14不受支持
原因是因为导出ovf的虚拟机版本太高. 两个方法,一个强制,一个推荐. 强制 1. 打开ovf后缀文件,把<vssd:VirtualSystemType>vmx-14</vssd:V ...
- WIN7安装jdk1.7
@官网下载地址 我的64位的 下载后双击,一直下一步就行.出现下面这个关掉就行 新建环境变量 JAVA_HOME C:\Program Files\Java\jdk1.7.0_04 新建环境变量CLA ...
- echarts中间有字饼图Demo2
echarts链接:http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ 完整代码: option = { backgroundColor: 'b ...
- android显示通知栏Notification以及自定义Notification的View
遇到的最大的问题是监听不到用户清除通知栏的广播.所以是不能监听到的. 自定义通知栏的View,然后service运行时更改notification的信息. /** * Show a notificat ...
- 小程序 picker 多列选择器 数据动态获取
需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 teach_area_id 字段关联 其各班级数据 ...
- mysql5.7 生成列 generated column
生成列的值是根据列定义中的表达式计算得出的. mysql5.7支持两种类型的生成列: 1.virtual 生成列:当从表中读取记录时,才计算该列值.不会把数据持久化在硬盘上. 2.stored 生成列 ...
- centos7下haproxy1.7的使用与配置
centos7下haproxy1.7的使用与配置 haproxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理. 一.haproxy下载 ...
- vue缓存之keep-alive，设置想要缓存的页面
由于项目需求从a页面跳转到b页面,返回a页面,a页面数据不能被刷新掉,方法很多列举12 方法1 a页面通过学期按钮切换学期,该学期里more进入b页面,返回a页面,返回回到对应a页面进入的高亮按钮设置 ...
- PAT 1042 字符统计(20)（思路）
1042 字符统计(20)(20 分) 请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式: 输入在一行中给出一个长度不超过1000的字符串.字符串由ASCII码表中任意可见字符及空格 ...
- iOS.NS_DEPRECATED_IOS
如何处理被NS_DEPRECATED_IOS标记的selector, 例如:类 AVAudioSession中有: - (BOOL)setPreferredHardwareSampleRate:(do ...