上传的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实现的UBB编码函数
Mar 09 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
详解vue axios二次封装
Jul 22 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
js函数和this用法实例分析
Mar 13 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
举例讲解Python常用模块
2019/03/08 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python读写文件基础知识点
2019/06/10 Python
python异步Web框架sanic的实现
2020/04/27 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
学校搬迁方案
2014/06/15 职场文书
青年文明号口号
2014/06/17 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python