上传的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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
jquery 插件学习(一)
Aug 06 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 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和ACCESS写聊天室(九)
2006/10/09 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python对html过滤处理的方法
2018/10/21 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
初中音乐教学反思
2014/01/12 职场文书
志愿者活动总结
2014/04/28 职场文书
教师考核评语
2014/04/28 职场文书
保护校园环境倡议书
2015/04/28 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
师范生见习总结范文
2015/06/23 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Vue深入理解插槽slot的使用
2022/08/05 Vue.js