<!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授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示：技术文章有一定的时效性，请先确认是否适用你当前的系统环境。
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示：技术文章有一定的时效性，请先确认是否适用你当前的系统环境。
