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鲜为人知的知识点

    这篇文章主要为大家介绍了Javascript中Microtask和Macrotask鲜为人知的知识点讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • Js动态添加复选框Checkbox的实例方法

    Js动态添加复选框Checkbox的实例方法

    Js动态添加复选框Checkbox的实例方法,需要的朋友可以参考一下
    2013-04-04
  • JavaScript 应用类库代码

    JavaScript 应用类库代码

    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日历相关函数使用详解

    js日历相关函数使用详解

    这篇文章主要为大家详细介绍了js日历相关函数的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • js判断移动端横竖屏视口检测实现的几种方法

    js判断移动端横竖屏视口检测实现的几种方法

    最近做歌一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式,本文就来介绍一下js判断移动端横竖屏视口检测实现的几种方法,感兴趣的可以了解一下
    2021-07-07
  • 微信小程序开发中var that =this的用法详解

    微信小程序开发中var that =this的用法详解

    这篇文章主要介绍了微信小程序开发中var that =this的用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript常用的返回,自动跳转,刷新,关闭语句汇总

    JavaScript常用的返回,自动跳转,刷新,关闭语句汇总

    这篇文章主要介绍了JavaScript常用的返回,自动跳转,刷新,关闭语句,实例汇总了常用的javascript技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • javascript关于继承的用法汇总

    javascript关于继承的用法汇总

    这篇文章主要介绍了javascript关于继承的用法,实例汇总了常见的javascript关于继承的用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 深入理解JavaScript作用域和作用域链

    深入理解JavaScript作用域和作用域链

    今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript
    2011-10-10
  • 浅谈JS三座大山之异步和单线程

    浅谈JS三座大山之异步和单线程

    首先我们要知道,js这门语言是单线程的,同时只能做一件事,比如说渲染dom,执行js方法,这些事情只能一个一个做,不能分开执行。(因为js需要操作dom,当两个js方法同时操作一个dom的时候就会出问题,所以js被设计成了单线程)。本文将介绍JS三座大山之异步和单线程。
    2021-06-06

最新评论