JS自定义函数对web前端上传的文件进行类型大小判断
更新时间：2016年10月19日 08:50:58 作者：南阳客
这篇文章主要介绍了JS自定义函数对web前端上传的文件进行类型大小判断的相关资料,需要的朋友可以参考下
废话不多说了直接给大家贴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中Microtask和Macrotask鲜为人知的知识点
这篇文章主要为大家介绍了Javascript中Microtask和Macrotask鲜为人知的知识点讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
Js动态添加复选框Checkbox的实例方法，需要的朋友可以参考一下2013-04-04
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 转载传播请保留版权2008-06-06
这篇文章主要为大家详细介绍了js日历相关函数的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最近做歌一个小项目，但是要放到我们的app上，然而需要横竖屏使用不同的样式，本文就来介绍一下js判断移动端横竖屏视口检测实现的几种方法，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了微信小程序开发中var that =this的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
JavaScript常用的返回，自动跳转，刷新，关闭语句汇总
这篇文章主要介绍了JavaScript常用的返回，自动跳转，刷新，关闭语句,实例汇总了常用的javascript技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了javascript关于继承的用法,实例汇总了常见的javascript关于继承的用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
今天这篇文章对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript2011-10-10
首先我们要知道，js这门语言是单线程的，同时只能做一件事，比如说渲染dom，执行js方法，这些事情只能一个一个做，不能分开执行。（因为js需要操作dom，当两个js方法同时操作一个dom的时候就会出问题，所以js被设计成了单线程）。本文将介绍JS三座大山之异步和单线程。2021-06-06
最新评论