直接贴代码吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上传本地预览</title>
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">

//图片上传预览 IE是用了滤镜。
function previewImage(file)
{
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
// img.style.marginLeft = rect.left+'px';
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}

param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
</head>
<body>
<div id="preview">
<img id="imghead" width="100" height="100" border="0" src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>

<input type="file" onchange="previewImage(this)" />
</body>
</html>

图片预览-兼容IE的更多相关文章

  1. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  2. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  3. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  4. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  5. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  7. 【javascrpt】——图片预览和上传，兼容IE 9-

    下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1.fileReader. ...

  8. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  9. javascript 实现图片预览（未上传到服务器端）

    1,图片预览 越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦.有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览.但这不是最佳实现方案,如果用户一 ...

随机推荐

  1. <转>Python OOP(1):从基础开始

    转自  http://www.cnblogs.com/BeginMan/p/3510786.html 本文旨在Python复习和总结: 1.如何创建类和实例? # 创建类 class ClassNam ...

  2. php判断正常访问和外部访问

    php判断正常访问和外部访问 <?php session_start(); if(isset($_POST['check'])&&!empty($_POST['name'])){ ...

  3. jquery.gritter.js简介

    Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网

  4. jQuery Sizzle选择器（三）

    在Sizzle的入口方法Sizzle()中看到的一个根据浏览器来初始化document各个方法的函数setDocument(),接下来主要看一下这个方法都做了什么. 但之前有必要看一下它用到的一些Si ...

  5. jQuery队列（二）

    继续阅读队列提供的方法. jQuery.extend({    queue: function( elem, type, data ) {}, // 将data按照某种类型存储到elem对应的队列中, ...

  6. angularjs笔记《二》

    小颖最近不知怎么了,老是犯困,也许是清明节出去玩,到现在还没缓过来吧,玩回来真的怕坐车了,报了个两日游得团,光坐车了,把人坐的难受得,去了也就是爬山,回来感觉都快瘫了,小颖去的时候还把我家仔仔抱着一起 ...

  7. psr-4

    自动加载: <?php function autoload($className) { $className = ltrim($className, '\\'); $fileName = ''; ...

  8. 2333: [SCOI2011]棘手的操作[离线线段树]

    2333: [SCOI2011]棘手的操作 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2325  Solved: 909[Submit][Stat ...

  9. magent实现memcached集群的一个问题

    之前我们小组封装了一个memcached类库,里面有一个名为RemoveStartWith的方法可以根据起始字符串删除所有节点中负责键值规则的缓存项.它实现的原理就是通过stats命令获取每个节点的所 ...

  10. rpm包安装失败的解决办法

    author: headsen  chen date :  2018-10-15  14:24:36 1,故障现象: # rpm -ivh zabbix-agent--.el6.x86_64.rpm ...