上传的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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue项目配置使用flow类型检查的步骤
Mar 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python如何修改装饰器中参数
2018/03/20 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python中列表的含义及用法
2020/05/26 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
副处级干部考察材料
2014/05/17 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
优秀纪检干部材料
2014/08/27 职场文书
土地转让协议书
2014/09/27 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript