浏览 3720 次
锁定老帖子 主题:JavaScript验证上传图片
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-11-01
最后修改:2010-08-24
可以对上传的图片的大小、长宽、格式等进行验证。
<!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=gb2312" /> <title>无标题文档</title> <script> UpLoadFileCheck=function() { this.AllowExt=".jpg,.gif,.bmp,.png";//允许上传的文件类型 0为无限制 this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位:KB this.AllowImgWidth=300;//允许上传的图片的宽度 0为无限制 单位:px this.AllowImgHeight=300;//允许上传的图片的高度 0为无限制 单位:px this.ImgObj=new Image(); this.ImgFileSize=0; this.ImgWidth=0; this.ImgHeight=0; this.FileExt=""; this.ErrMsg=""; this.IsImg=false; } UpLoadFileCheck.prototype.CheckExt=function(obj) { this.ErrMsg=""; this.ImgObj.src=obj.value; if(obj.value=="") { this.ErrMsg="\n请选择一个文件"; } else { this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1) { this.ErrMsg="\n该文件类型不允许上传"; } } if(this.ErrMsg!="") { this.ShowMsg(this.ErrMsg,false); return false; } else return this.CheckProperty(obj); } UpLoadFileCheck.prototype.CheckProperty=function(obj) { if(this.IsImg==true) { this.ImgWidth=this.ImgObj.width; this.ImgHeight=this.ImgObj.height; if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth) this.ErrMsg=this.ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件"; if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight) this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件"; } this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100; if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize) this.ErrMsg=this.ErrMsg+"\n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件"; if(this.ErrMsg!="") { this.ShowMsg(this.ErrMsg,false); return false; } else return true; } UpLoadFileCheck.prototype.ShowMsg=function(msg,tf) { alert(msg); } function c(obj) { var d=new UpLoadFileCheck(); d.IsImg=true; d.AllowImgFileSize=100; d.CheckExt(obj) } </script> </head> <body> <input name="" type="file" onchange="c(this)"/> </body> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |