上传的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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
js函数调用常用方法详解
Dec 03 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
js在HTML的三种引用方式详解
Aug 29 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php生成验证码函数
2015/10/20 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php验证码生成器
2017/05/24 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
庆元旦广播稿
2014/02/10 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
python 爬取华为应用市场评论
2021/05/29 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS