上传的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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
js同源策略详解
May 21 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
Json解析的方法小结
Jun 22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
JavaScript 作用域实例分析
Oct 02 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
Javascript事件实例详解
2013/11/06 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
vuex入门最详细整理
2020/03/04 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python操作串口的方法
2015/06/17 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
影视制作岗位职责
2013/12/04 职场文书
升国旗仪式主持词
2014/03/19 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
大学毕业生个人总结
2015/02/28 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
实现一个简单得数据响应系统
2021/11/11 Javascript
Nginx源码编译安装过程记录
2021/11/17 Servers