上传的js验证(图片/文件的扩展名)


Posted in Javascript onApril 25, 2013

js 验证上传图片

var ImgObj=new Image();//建立一个图像对象 
varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 
varFileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,IsImg//全局变量图片相关属性 
//以下为限制变量 
var AllowExt=""; //允许上传的文件类型ŀ为无限制每个扩展名后边要加一个"|" 小写字母表示 
var AllowImgFileSize=100;//允许上传图片文件的大小 0为无限制 单位:KB 
var AllowImgWidth=385; //允许上传的图片的宽度Ɓ为无限制 单位:px(像素) 
var AllowImgHeight=441; //允许上传的图片的高度ƹ为无限制 单位:px(像素) 
function CheckProperty(obj) //检测图像属性 
{ 
FileObj=obj; 
if(ImgObj.readyState!="complete")//如果图像是未加载完成进行循环检测 
{ 
setTimeout("CheckProperty(FileObj)",500); 
return false; 
} 
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 
ImgWidth=ImgObj.width;//取得图片的宽度 
ImgHeight=ImgObj.height; //取得图片的高度 
FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px"; 
FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb"; 
FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt+"\n可以上传!"; 
ErrMsg=""; 
if(AllowImgWidth!=ImgWidth) 
ErrMsg=ErrMsg+"\n请上传宽度等于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px"; 
if(AllowImgHeight!=ImgHeight) 
ErrMsg=ErrMsg+"\n请上传高度等于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px"; 
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) 
ErrMsg=ErrMsg+"\n请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB"; 
if(ErrMsg!="") 
{ 
alert(ErrMsg); 
return false; 
} 
else 
return true; 
}//end CheckProperty(); 
ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!';} 
function CheckExt(obj) 
{ 
ErrMsg=""; 
FileMsg=""; 
IsImg=false; 
if(obj.value=="") 
return false; 
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
if(AllImgExt.indexOf(FileExt+"|")!=-1)//如果图片文件,则进行图片信息处理 
{ 
IsImg=true; 
FileObj=obj; 
ImgObj.src=obj.value; 
returnCheckProperty(obj); 
}else 
{ 
alert("该文件类型不允许上传。请上传"+AllImgExt+"类型的文件,\n当前文件类型为"+FileExt); 
obj.value=''; 
return false; 
} 
}

上传的js验证
下文给大家介绍怎样控制一个上传文件的扩展名。
js:
function check2() 
{ 
var file = document.getElementsByName("file").value; 
if(file=="") 
{ 
alert("请选择文件"); 
return false; 
} 
var strTemp = file.split("."); 
var strCheck = strTemp[strTemp.length-1]; 
if(strCheck.toUpperCase()=='JPG') 
{ 
return true; 
}else 
{ 
alert('上传文件类型不对!'); 
return false; 
} 
}

表单:
<form action="*.jsp" method="post" onsubmit="return check()"> 
<input type="file" name="file"> 
<input type="submit" value="上传"> 
</form>

需要注意的是,document.getElementsByName("file").value获取的是所上传的文件的绝对路径,故使用字符串分割法将文件的拓展名分割出来,然后再进行判断。
Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
jcrop基本参数一览
Jul 16 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
微信小程序日历效果
Dec 29 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 #Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 #Javascript
jQuery中 noConflict() 方法使用
Apr 25 #Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 #Javascript
js Array对象的扩展函数代码
Apr 24 #Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 #Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 #Javascript
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python实现tail -f 功能
2020/01/17 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python 实现控制鼠标键盘
2020/11/27 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
可贵的沉默教学反思
2014/02/06 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
淘宝活动总结范文
2014/06/26 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
刘胡兰观后感
2015/06/16 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python
python分分钟绘制精美地图海报
2022/02/15 Python