使用JS验证上传文件大小的两种兼容方案
本文介绍在文件上传场景中,如何利用JavaScript在客户端验证文件大小以避免大文件传输延迟。针对现代浏览器,可直接通过File API获取size属性;对于旧版IE,则利用img标签的dynsrc属性间接获取。文章对比了两种方法的实现细节及ActiveX权限提示差异,提供了兼顾兼容性与用户体验的解决方案。
文件上传验证的背景与问题
近期在处理文件上传功能时,发现若用户恶意上传2GB的大文件,后台处理响应会显著变慢。为优化体验,考虑引入JavaScript进行客户端前置验证。然而,查阅网络资料发现,多数方案依赖ActiveXObject("Scripting.FileSystemObject")对象。该方法要求用户手动提高Internet选项中的安全级别,并启用系统不推荐的设置,这会触发极不友好的安全警告提示。

鉴于上述安全性与用户体验问题,该方案并未被采用,因此需要寻找其他替代方法。
新的思路转向利用<img>标签中的dynsrc属性来实现文件大小的获取。
现代浏览器与IE的兼容实现方案
在现代浏览器(如Firefox、Chrome)中,可以通过document.getElementById("id_file").files[0].size直接获取上传文件的字节大小。然而,IE浏览器不支持此属性,需借助<img>标签的dynsrc属性间接获取文件大小。虽然此方法仍需用户同意运行ActiveX控件,但不会弹出前述那种不友好且被视为不安全的高危提示。
具体实现步骤如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="DEscription" contect="my code demo" />
<meta name="Author" contect="Michael@www.micmiu.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js check file size @ www.micmiu.com</title>
</head>
<body>
<img id="tempimg" dynsrc="" src="" style="display:none" />
<input type="file" name="file" id="fileuploade" size="40" />
<input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
</body>
<script type="text/javascript">
var maxsize = 2*1024*1024;//2M
var errMsg = "上传的附件文件不能超过2M!!!";
var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。";
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
}
function checkfile(){
try{
var obj_file = document.getElementById("fileuploade");
if(obj_file.value==""){
alert("请先选择上传文件");
return;
}
var filesize = 0;
if(browserCfg.firefox || browserCfg.chrome ){
filesize = obj_file.files[0].size;
}else if(browserCfg.ie){
var obj_img = document.getElementById('tempimg');
obj_img.dynsrc=obj_file.value;
filesize = obj_img.fileSize;
}else{
alert(tipMsg);
return;
}
if(filesize==-1){
alert(tipMsg);
return;
}else if(filesize>maxsize){
alert(errMsg);
return;
}else{
alert("文件大小符合要求");
return;
}
}catch(e){
alert(e);
}
}
</script>
</html>
以上即为关于使用JavaScript验证上传文件大小的简单且实用的方法介绍,感谢阅读。
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
