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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
javascript new一个对象的实质
Jan 07 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 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 变量的定义方法
2010/01/26 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js中split和replace的用法实例
2015/02/28 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
乡镇干部十八大感言
2014/02/17 职场文书
经典英文广告词
2014/03/18 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
公司授权委托书范文
2014/09/21 职场文书
开除员工通知
2015/04/22 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB