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 ...
随机推荐
- unity3d休闲篮球类游戏《Flick Basketball 》上线项目完整源码
下载地址: https://item.taobao.com/item.htm?id=576135964241
- JDBC、ODBC、OLE DB、ADO、ADOMD区别与联系
ODBC: (Open Database Connectivity,开放数据库互连),它建立了一组规范,并提供了一组对数据库访问的标准API(应用程序编程接口).这些API利用SQL来完成其大部分任务 ...
- 开机进入boot menu和application menu，无法开机
1.开机点击F1进入到bios界面 2.进入Security—Secure Boot—Disabled 如果不修改Secure boot选项为Disabled,在光驱引导时可能会出现报错 3. ...
- swift - 接入听云监测 - 问题
1. 正常下载 探针SDK:https://report.tingyun.com/mobile-web/#/onlyHeader/sdkDownload 2.按步骤接入 ,添加库啊,什么的URLSc ...
- java图片操作--生成与原图对称的图片
java图片操作--生成与原图对称的图片 package com.pay.common.util; import java.awt.image.BufferedImage; import java.i ...
- java_12多态
1多态概述 多态是继封装.继承之后,面向对象的第三大特性. 现实事物经常会体现出多种形态,如学生,学生是人的一种,则一个具体的同学张三既是学生也是人,即出现两种形态. Java作为面向对象的语言,同样 ...
- win10下安装配置mysql-8.0.13
1.下载mysql-8.0.13安装包 https://dev.mysql.com/downloads/mysql/ 选择zip安装包下载就好. 2.解压到你要安装的目录 3.创建my.ini配置文件 ...
- java学习笔记1--基础知识
1.java数据类型 2.类之间的几种关系
- PAT 甲级 1011 World Cup Betting (20)（代码+思路）
1011 World Cup Betting (20)(20 分) With the 2010 FIFA World Cup running, football fans the world over ...
- 洛谷4054 [JSOI2009]计数问题
原题链接 二维树状数组模板题. 对每一种颜色开一棵二维树状数组统计即可. #include<cstdio> using namespace std; const int N = 310; ...