上传的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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
js动态引入的四种方法
May 05 Javascript
js实现秒表计时器
Dec 16 Javascript
Angular处理未可知异常错误的方法详解
Jan 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实现图象锐化代码
2007/06/14 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
Opacity.js
2007/01/22 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
使用Python设计一个代码统计工具
2018/04/04 Python
详解Python sys.argv使用方法
2019/05/10 Python
使用Python发现隐藏的wifi
2020/03/04 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
毕业证明模板
2015/06/19 职场文书
小学班级标语口号大全
2015/12/26 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL