面向对象程序---JS上传前显示图片缩略图_兼容IE+FF+Chrome

<!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>JS上传前显示图片缩略图</title>
<style type="text/css">
#upload_file{ display:none;}
#show_img{/*图片上下左右居中*/
width:300px; height:300px;
/*display:table-cell;
text-align:center; vertical-align:middle;
line-height:300px;
*float:left; *font-size:300px; *font-family:SimSun;*/	/*for IE6,7*/
border:1px solid green; padding:1px;
}
 #show_img img{ max-width:300px; max-height:300px; vertical-align:middle;}
#prevImg{ visibility:hidden;}/*必须是visible,display:none不可以*/
</style>
<script type="text/javascript">

function id(id)	//将获取ID元素方法封装
{
return document.getElementById(id);
}

LocalUpload.prototype.zoomImg=function (obj, imaxW, imaxH, iOriW, iOriH)	//对选取图片按等比列缩放及在容器中居中
{
var oZoomImg={width:0, height:0, left:0, top:0};
var rateW=iOriW/imaxW;
var rateH=iOriH/imaxH;
if(rateW > rateH)
{
oZoomImg.width=imaxW;
oZoomImg.height=Math.round(iOriH/rateW);
}
else if(rateW <= rateH)
{
oZoomImg.height=imaxH;
oZoomImg.width=Math.round(iOriW/rateH);	
}
oZoomImg.left=parseInt((imaxW-oZoomImg.width)/2);
oZoomImg.top=parseInt((imaxH-oZoomImg.height)/2);
obj.style.width=oZoomImg.width+'px';
obj.style.height=oZoomImg.height+'px';	 
obj.style.marginLeft=oZoomImg.left+'px'
obj.style.marginTop=oZoomImg.top+'px';
};

LocalUpload.prototype.popFile=function()	//模拟表单type='file'弹出本地选择图片弹出框
{
this.oFile.click();	//用自定义按钮模拟form默认图片上传表单
}

LocalUpload.prototype.chooseFile=function (oFile)	//获取选择图片的路径并将其赋值给相应显示的容器里的img
{
var oImg=document.createElement('img');
var _this=this;	//this指的是LocalUpload对象
var sImgSrc=oFile.value;
if(_this.checkImgType(sImgSrc))	//判断是否是符合格式的图片
{
if(_this.getFileSize(oFile))	//判断上传图片大小是否在限制范围内
{
if(oFile.files)	//FF,Chrome方式
{	
oImg.onload=function()
{	
_this.zoomImg(oImg, _this.iMaxW, _this.iMaxH, oImg.offsetWidth, oImg.offsetHeight);	
}	
var oFileReader=new FileReader();
oFileReader.onload=function(ev)
{
oImg.src=ev.target.result;	
}
oFileReader.readAsDataURL(oFile.files[0]);
}
else	//IE方式
{
oImg.src=sImgSrc;
_this.oPrevImg.src=sImgSrc;
_this.zoomImg(oImg, _this.iMaxW, _this.iMaxH, _this.oPrevImg.offsetWidth, _this.oPrevImg.offsetHeight);
}
_this.oDiv.appendChild(oImg);	
}
else
{
alert('请上传图片大小在5M以内的图片');
return ;
}
}
else
{	
alert('请上传格式为:jpg,jpeg,gif,png,bpm格式的图片');
return ;
}
}

LocalUpload.prototype.getFileSize=function(oFile)	//获取图片的空间大小
{
var iFileSize=0;
if(oFile.files)	//FF
{
//num.toFixed将num保留2为小数
//iFileSize=((oFile.files[0].size/1024)/1024).toFixed(2);
iFileSize=oFile.files[0].size;
}
else
{
//IE可以用,不足之处会有安全提示,把文件名改为.hta则会屏蔽掉安全提示
var obj=new ActiveXObject("Scripting.FileSystemObject");	
iFileSize=obj.GetFile(oFile.value).size;
}
if(iFileSize<this.iLimitSize)
{
return true;
}
else
{
return false;	
}
}

LocalUpload.prototype.checkImgType=function(src)	//检查选取图片的格式
{
var bType=true;
if(!src.match(/(.jpg|.gif|.png|.jpeg|.bpm)$/i))
{
bType=false;
}
return bType;
}

function LocalUpload(obj)	//本地上传构造函数
{
this.oBtn=id(obj.oUploadBtn);
this.oFile=id(obj.oFile);
this.oDiv=id(obj.oShowDiv);
this.oPrevImg=id(obj.oPrevImg);
this.iMaxW=obj.iMaxW;
this.iMaxH=obj.iMaxH;
this.iLimitSize=obj.iLimitSize;
var _this=this;
this.oBtn.onclick=function()
{	
_this.popFile();
};
this.oFile.onchange=function()
{
_this.chooseFile(this);
};
}	
window.onload=function()
{
new LocalUpload({
oUploadBtn:'upload_btn',	//自定义本地上传按钮
oFile:'upload_file',	//上传表单
oShowDiv:'show_img',	//上传前显示缩略图的容器
oPrevImg:'prevImg',	//为IE获取图片原始尺寸的预img
iMaxW:300,	//图片最大显示宽度	
iMaxH:300,	//图片最大显示高度
iLimitSize:5242880	//限制上传图片大小为5M=5242880 byte
});
};
</script>
</head>

<body>
<input id="upload_file" type="file" />
<img id="upload_btn" src="http://www.w3cfuns.com/data/attachment/album/201304/08/210035jmyx0e69l9bpxomh.jpg.thumb.jpg" />
<div id="show_img">
<img id="prevImg" />
</body>
</html>

原文地址:http://www.w3cfuns.com/blog-5400368-5396043.html

本文链接:https://www.92ez.com/archives/140/
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示:技术文章有一定的时效性,请先确认是否适用你当前的系统环境。

上一篇: JS关闭子页面刷新父页面的方法
下一篇: jquery easyui皮肤主题定制修改

访客评论
目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):