javascript实现限制上传文件大小
前言：
项目中经常用到需要上传文件、照片等功能，同时需要限制所上传文件的大小。很多插件都会采用后台请求验证，前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。
这个是比较好的
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
varisIE=/msie/i.test(navigator.userAgent)&&!window.opera;
functionfileChange(target,id){
varfileSize=0;
varfiletypes=[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
varfilepath=target.value;
varfilemaxsize=1024*2;//2M
if(filepath){
varisnext=false;
varfileend=filepath.substring(filepath.indexOf("."));
if(filetypes&&filetypes.length>0){
for(vari=0;i<filetypes.length;i++){
if(filetypes[i]==fileend){
isnext=true;
break;
}
}
}
if(!isnext){
alert("不接受此文件类型！");
target.value="";
returnfalse;
}
}else{
returnfalse;
}
if(isIE&&!target.files){
varfilePath=target.value;
varfileSystem=newActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在，请重新输入！");
returnfalse;
}
varfile=fileSystem.GetFile(filePath);
fileSize=file.Size;
}else{
fileSize=target.files[0].size;
}
varsize=fileSize/1024;
if(size>filemaxsize){
alert("附件大小不能大于"+filemaxsize/1024+"M！");
target.value="";
returnfalse;
}
if(size<=0){
alert("附件大小不能为0M！");
target.value="";
returnfalse;
}
}
</script>
</head>
<body>
<inputtype="file"name="contractFileName"style="width:500px;"onchange="fileChange(this);"/>
</body>
</html>
下面的代码不建议使用
代码很简单，关键就是怎么用JS拿到文件然后获取文件大小，进而去判断拦截。由于各种历史原因，IE的ActiveX控件因素，获取文件的方法可能和其他浏览器有所不同，所以只需稍加判断即可。
JS代码：
<scripttype="text/javascript">
//判断是否为IE浏览器：/msie/i.test(navigator.userAgent)为一个简单正则
varisIE=/msie/i.test(navigator.userAgent)&&!window.opera;
functionfileChange(target){
varfileSize=0;
if(isIE&&!target.files){//IE浏览器
varfilePath=target.value;//获得上传文件的绝对路径
/**
*ActiveXObject对象为IE和Opera所兼容的JS对象
*用法：
*varnewObj=newActiveXObject(servername.typename[,location])
*其中newObj是必选项。返回ActiveXObject对象的变量名。
*servername是必选项。提供该对象的应用程序的名称。
*typename是必选项。要创建的对象的类型或类。
*location是可选项。创建该对象的网络服务器的名称。
*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*Scripting.FileSystemObject为IIS内置组件，用于操作磁盘、文件夹或文本文件，
*其中返回的newObj方法和属性非常的多
*如：varfile=newObj.CreateTextFile("C:\test.txt",true)第二个参表示目标文件存在时是否覆盖
*file.Write("写入内容");file.Close();
*/
varfileSystem=newActiveXObject("Scripting.FileSystemObject");
//GetFile(path)方法从磁盘获取一个文件并返回。
varfile=fileSystem.GetFile(filePath);
fileSize=file.Size;//文件大小，单位：b
}
else{//非IE浏览器
fileSize=target.files[0].size;
}
varsize=fileSize/1024/1024;
if(size>1){
alert("附件不能大于1M");
}
}
</script>
HTML代码
<inputtype="file" style="width:500px;"onchange="fileChange(this);"/>
一个简单、轻便、快捷的用JS代码来判断文件大小的方法就OK了，至于ActiveXObject对象感兴趣的可以去深究，它可以根据入参的不同返回不同的对象，通常该对象的功能和作用也是非常有用和强大的。
本文内容就到这里了，是不是非常简单实用的代码呢，希望大家能够喜欢。