上传的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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
如何取得中文输入的真实长度?
2006/06/24 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
Js sort排序使用方法
2011/10/17 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python图像处理之反色实现方法
2015/05/30 Python
Python数据可视化之画图
2019/01/15 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
澳大利亚网上书店:QBD
2021/01/09 全球购物
我的中国梦口号
2014/06/16 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
php字符串倒叙
2021/04/01 PHP
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫