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