上传的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学习之闭包分析
Dec 02 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
js轮播图之旋转木马效果
Oct 13 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
js表数据排序 sort table data
2009/02/18 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
通过实例解析Python return运行原理
2020/03/04 Python
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
护士的岗位职责
2013/12/04 职场文书
实习协议书范本
2014/09/25 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis