<html>
<head>
<title>兼容于ie,firefox,netscape的等比例图片本地预览的javascript实现</title>
<meta http-equie="keywords" content="兼容ie,firefox,netscape,等比例图片,javascript">
<script type="text/javascript">
/*
兼容于ie,firefox,netscape的等比例图片本地预览的javascript实现
author:semovy@gmail.com
date:14:39 上午 2007-10-9
@param:targetImg string id 待显示等比例调整过的目标元素的id字符串
@param:imgSrc string src 等处理的图片源路径字符串
@param:fitWidth int 等显示图片的最大宽度
@param:fitHeight int 等显示图片的最大高度
*/
function resizeImage(targetImg,imgSrc,fitWidth,fitHeight)
{
var imgSrc = "file:///" + imgSrc.replace(/\\/g,"/");//本地路径c:\a.jpg,而ff,ns不支持,所以替换成file:///c:/a.jpg这种形式
var img = document.getElementById(targetImg);//获取目标图片元素容器
var tempImg = new Image();//建立临时图片对象
tempImg.src = imgSrc;//给临时图片对象赋予图片源
var scale=1.0;//图片度高比例因子.
var width=0,height=0;
/*firefox实现了complete属性，而ie实现了complete属性和readyState属性
但是两者对属性的定义好像不同：
firefox： 一个图像被下载完毕，complete属性就是true，没有下载完毕则为false
ie：一个图像没有被下载完毕，则readyState属性为uninitialized,complete属性是false.当下载完毕时，
readyState为complete，而如果此时图片还没有显示，complete为false,显示以后(display:block)此属性才变成true
*/
if(document.all)//如果是ie
{
if(tempImg.readyState=='complete')
{
width = tempImg.width;//获取源图片宽,高
height = tempImg.height;
}
}
else(tempImg.complete)//fire fox ,netscape
{
width = tempImg.width;
height = tempImg.height;
}
scale = width/height;//宽度比例因子
if(width > fitWidth)//等比例调整
{
width = fitWidth;
height = width/scale;
if(height > fitHeight)
{
height = fitHeight;
width = height*scale;
}
}
if(height > fitHeight)
{
height = fitHeight;
width = height*scale;
}
img.width = width;//调整后的宽,高
img.height = height;
img.src = imgSrc;
img.style.display="";//显示图片
}
</script>
</head>
<body>
<!--目标显示图片组件,初始化为隐藏格式-->
<img id="img" style="display:none">
<input type="file" id="imgFile" onchange="resizeImage('img',this.value,150,150)">
</body>
</html>