上传的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 相关文章推荐
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
JS实现随机点名器
Apr 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(视频)Http下载
2006/12/12 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
Date对象格式化函数代码
2010/07/17 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Tornado高并发处理方法实例代码
2018/01/15 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
员工年终自我评价
2014/09/14 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2014年度安全工作总结
2014/12/04 职场文书
中层干部考核评语
2015/01/04 职场文书
司考复习计划
2015/01/19 职场文书
结婚典礼主持词
2015/06/29 职场文书
成人成长感言如何写?
2019/08/16 职场文书