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 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js显示文本框提示文字的方法
May 07 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
Vue实现简单的跑马灯
May 25 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python Matplotlib模块的使用
2020/09/16 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
微笑服务标语
2014/06/24 职场文书
旅行社计调工作总结
2015/08/12 职场文书
python pyhs2 的安装操作
2021/04/07 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python