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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
JS作用域深度解析
Dec 29 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
原生js实现表格循环滚动
Nov 24 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
javascript实现简易的计算器
2020/01/17 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python设计模式之代理模式简单示例
2018/01/09 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
餐饮收银员岗位职责
2014/02/07 职场文书
人事经理岗位职责
2014/04/28 职场文书
交通志愿者活动总结
2014/06/27 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
安全温馨提示语大全
2015/07/14 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
关于使用Redisson订阅数问题
2022/01/18 Redis