上传的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 相关文章推荐
异步加载script的代码
Jan 12 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
解决vue keep-alive 数据更新的问题
Sep 21 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
antd Upload 文件上传的示例代码
2018/12/14 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python的语言类型(详解)
2017/06/24 Python
python如何实现一个刷网页小程序
2018/11/27 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
面料业务员岗位职责
2013/12/26 职场文书
化学教学随笔感言
2014/02/19 职场文书
揭牌仪式主持词
2014/03/19 职场文书
承诺书范文
2014/06/03 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
社保委托书怎么写
2014/08/02 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年司机工作总结
2014/11/21 职场文书
公司保密管理制度
2015/08/04 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS