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 相关文章推荐
日期 时间js控件
May 07 Javascript
JQuery toggle使用分析
Nov 16 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
js打造数组转json函数
Jan 14 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
SONY SRF-40W电路分析
2021/03/02 无线电
php单件模式结合命令链模式使用说明
2008/09/07 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
基于Vue过渡状态实例讲解
2017/09/14 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python只用40行代码编写的计算器实例
2017/05/10 Python
python实现Adapter模式实例代码
2018/02/09 Python
python制作简单五子棋游戏
2019/06/18 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
keras导入weights方式
2020/06/12 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
个人自荐书
2013/12/20 职场文书
邀请函模板
2015/02/02 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
公司开会通知
2015/04/20 职场文书
搞笑结婚保证书
2015/05/08 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python