上传的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 相关文章推荐
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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
php读取msn上的用户信息类
2008/12/05 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python 初始化一个定长的数组实例
2019/12/02 Python
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
学党史心得体会
2014/09/05 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
分享几种python 变量合并方法
2022/03/20 Python