本文介绍如何使用前端JavaScript限制上传文件的大小。通过判断浏览器类型，利用标准API或IE特有的ActiveXObject获取文件字节数，并与设定阈值（如1MB）进行比较，从而在提交前拦截超大文件，避免无效的后端请求。
前端JS限制上传文件大小的实现方法
前言：
在Web开发中，上传文件或图片是常见需求，同时往往需要限制上传文件的大小。虽然许多插件倾向于通过后台请求进行验证，但前端JavaScript校验相对较少。本文介绍一种便捷的前端JS判断上传文件大小的方法。
这个是比较好的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target, id) {
var fileSize = 0;
var filetypes = [".jpg", ".png", ".rar", ".txt", ".zip", ".doc", ".ppt", ".xls", ".pdf", ".docx", ".xlsx"];
var filepath = target.value;
var filemaxsize = 1024 * 2;//2M
if (filepath) {
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if (filetypes && filetypes.length > 0) {
for (var i = 0; i < filetypes.length; i++) {
if (filetypes[i] == fileend) {
isnext = true;
break;
}
}
}
if (!isnext) {
alert("不接受此文件类型！");
target.value = "";
return false;
}
} else {
return false;
}
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if (!fileSystem.FileExists(filePath)) {
alert("附件不存在，请重新输入！");
return false;
}
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if (size > filemaxsize) {
alert("附件大小不能大于" + filemaxsize / 1024 + "M！");
target.value = "";
return false;
}
if (size <= 0) {
alert("附件大小不能为0M！");
target.value = "";
return false;
}
}
</script>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
</body>
</html>下面的代码不建议使用
实现逻辑并不复杂，核心在于如何通过JS获取文件对象并读取其大小，进而进行拦截判断。由于历史原因，IE浏览器中的ActiveX控件机制导致获取文件的方式与其他现代浏览器存在差异，因此代码中需加入简单的浏览器判断逻辑。
JS代码：
<script type="text/javascript">
// 判断是否为IE浏览器： /msie/i.test(navigator.userAgent) 为一个简单正则
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target){
var fileSize = 0;
if (isIE && !target.files) { // IE浏览器
var filePath = target.value; // 获得上传文件的绝对路径
/**
* ActiveXObject 对象为IE和Opera所兼容的JS对象
* 用法：
* var newObj = new ActiveXObject( servername.typename[, location])
* 其中newObj是必选项。返回 ActiveXObject对象 的变量名。
* servername是必选项。提供该对象的应用程序的名称。
* typename是必选项。要创建的对象的类型或类。
* location是可选项。创建该对象的网络服务器的名称。
*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
* Scripting.FileSystemObject 为 IIS 内置组件，用于操作磁盘、文件夹或文本文件，
* 其中返回的 newObj 方法和属性非常的多
* 如：var file = newObj.CreateTextFile("C:\test.txt", true) 第二个参表示目标文件存在时是否覆盖
* file.Write("写入内容"); file.Close();
*/
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
// GetFile(path) 方法从磁盘获取一个文件并返回。
var file = fileSystem.GetFile(filePath);
fileSize = file.Size; // 文件大小，单位：b
}
else { // 非IE浏览器
fileSize = target.files[0].size;
}
var size = fileSize / 1024 / 1024;
if (size > 1) {
alert("附件不能大于1M");
}
}
</script>HTML代码
代码如下:
<input type="file" style="width: 500px;" onchange="fileChange(this);"/>通过上述简单、轻便且快捷的JS代码，即可实现文件大小的前端判断。对于ActiveXObject对象，感兴趣者可深入探究，它根据入参不同可返回不同对象，其功能通常非常强大且有用。
本文内容就到这里了，是不是非常简单实用的代码呢，希望大家能够喜欢。