JS自定义函数对web前端上传的文件进行类型大小判断


Posted in Javascript onOctober 19, 2016

废话不多说了直接给大家贴js代码了。具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>web前端对上传的文件进行类型大小判断的js自定义函数</title>
</head>
<body>
<form>
<input type="file" id="fileId"> 
<input type="button" value = "提交" onclick="checkFileSizeAndType(10*1024*1024,['gif','jpg','png'],'fileId');">
</form>
<script>
//参数说明
//maxSize 代表允许最大上传的文件大小,单位是字节
//allowType 代表允许上传的文件类型(后缀) 
//fileId 代表input type=file 框 的id
function checkFileSizeAndType(maxSize,allowType,fileId) {
//默认大小
if(!maxSize){
maxSize=10*1024*1024;
}
//默认类型
if(!allowType){
allowType=new Array('jpg','png'); 
}
//js通过id获取上传的文件对象
var file = document.getElementById(fileId); 
var types =allowType;
var fileInfo = file.files[0];
if(!fileInfo){
alert("请选择文件!");
return false;
}
var fileName = fileInfo.name;
//获取文件后缀名
var file_typename = fileName.substring(
fileName.lastIndexOf('.') + 1, fileName.length);
//定义标志是否可以提交上传
var isUpload = true;
//定义一个错误参数:1代表大小超出 2代表类型不支持
var errNum =0;
if (fileInfo) {
if (fileInfo.size > maxSize) {
isUpload = false;
errNum=1;
} else {
for ( var i in types) {
if (types[i] == file_typename) {
isUpload = true;
return isUpload;
} else {
isUpload = false;
errNum=2;
}
}
}
}
//对错误的类型进行对应的提示
if (!isUpload) {
if(errNum==1){
var size = maxSize/1024/1024;
alert("上传的文件必须为小于"+size+"M的图片!");
}else if(errNum==2){
alert("上传的"+file_typename+"文件类型不支持!只支持"+types.toString()+"格式");
}else{
alert("没有选择文件");
}
file.value="";
return isUpload;
}
}
</script>
</body>
</html>

以上所述是小编给大家介绍的JS自定义函数对web前端上传的文件进行类型大小判断,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
Jquery解析json数据详解
Dec 26 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
JavaScript 基本概念
Jan 20 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
jQuery  ready方法实现原理详解
Oct 19 #Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 #Javascript
Javascript typeof与instanceof的区别
Oct 18 #Javascript
javascript self对象使用详解
Oct 18 #Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 #Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 #Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
关于JavaScript中string 的replace
2013/04/12 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jquery.Callbacks的实现详解
2016/11/30 Javascript
vue.js的提示组件
2017/03/02 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python多线程爬虫简单示例
2016/03/04 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
django创建超级用户过程解析
2019/09/18 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
法律进机关实施方案
2014/03/12 职场文书
捐赠仪式主持词
2014/03/19 职场文书
暑期培训班策划方案
2014/08/26 职场文书
欠条样本
2015/07/03 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
养成教育工作总结
2015/08/13 职场文书