js验证上传图片的方法


Posted in Javascript onMay 12, 2015

本文实例讲述了js验证上传图片的方法。分享给大家供大家参考。具体实现方法如下:

<!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>
<script>
 UpLoadFileCheck=function()
 { 
  this.AllowExt=".jpg,.gif";
  //允许上传的文件类型 0为无限制
  //每个扩展名后边要加一个"," 小写字母表示 
  this.AllowImgFileSize=0;
  //允许上传文件的大小 0为无限制 单位:KB 
  this.AllowImgWidth=0;
  //允许上传的图片的宽度 0为无限制 单位:px(像素) 
  this.AllowImgHeight=0;
  //允许上传的图片的高度 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; 
 //this.HasChecked=false; 
 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该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件,当前文件类型为"+this.FileExt;  
  }
 } 
 if(this.ErrMsg!="") 
 {
  this.ShowMsg(this.ErrMsg,false); 
  return false;
 }
 else  
  return this.CheckProperty(obj);  
 }
 UpLoadFileCheck.prototype.CheckProperty=function(obj)
 {
 if(this.ImgObj.readyState!="complete")//
  { 
  sleep(1000);//一秒使用图能完全加载  
  }  
 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的文件,当前图片宽度为"+this.ImgWidth+"px"; 
  if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight) 
  this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件,当前图片高度为"+this.ImgHeight+"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的文件,当前文件大小为"+this.ImgFileSize+"KB"; 
 if(this.ErrMsg!="") 
 {
  this.ShowMsg(this.ErrMsg,false); 
  return false;
 }
 else 
  return true; 
 } 
 UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)
 //显示提示信息 tf=false 显示错误信息 msg-信息内容 
 { 
 /*msg=msg.replace("\n","<li>"); 
 msg=msg.replace(/\n/gi,"<li>"); 
  */
 alert(msg);
 }
 function sleep(num) 
 { 
  var tempDate=new Date(); 
  var tempStr=""; 
  var theXmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" ); 
  while((new Date()-tempDate)<num ) 
  { 
  tempStr+="\n"+(new Date()-tempDate); 
  try{ 
  theXmlHttp .open( "get", "about:blank?JK="+Math.random(), false ); 
  theXmlHttp .send(); 
  } 
  catch(e){;} 
  } 
  //containerDiv.innerText=tempStr; 
 return; 
 } 
 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>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js清空form表单中的内容示例
May 20 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
react路由配置方式详解
Aug 07 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 #Javascript
js实现一个链接打开两个链接地址的方法
May 12 #Javascript
js实现鼠标经过表格行变色的方法
May 12 #Javascript
js比较日期大小的方法
May 12 #Javascript
js实现简单div拖拽功能实例
May 12 #Javascript
js实现两点之间画线的方法
May 12 #Javascript
jquery简单实现图片切换效果的方法
May 12 #Javascript
You might like
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php密码生成类实例
2014/09/24 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python画折线图的程序
2018/07/26 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python实现不规则图形填充的思路
2020/02/02 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
联谊会主持词
2014/03/26 职场文书
借款协议书
2014/04/12 职场文书
初三学生评语大全
2014/04/24 职场文书
市政管理求职信范文
2014/05/07 职场文书
优秀校长事迹材料
2014/12/24 职场文书
销售内勤岗位职责
2015/02/10 职场文书
银行稽核岗位职责
2015/04/13 职场文书
春风化雨观后感
2015/06/11 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书