上传的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 相关文章推荐
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
Vue动态组件实例解析
Aug 20 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
vue使用openlayers实现移动点动画
Sep 24 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
js实现div弹出层的方法
2014/11/20 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Linux下python制作名片示例
2018/07/20 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
教师业务培训方案
2014/05/01 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
大学军训口号大全
2015/12/24 职场文书