项目中经常用到需要上传文件、照片等功能，同时需要限制所上传文件的大小。很多插件都会采用后台请求验证，前端Js校验比较少。本篇介绍一个前端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" 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" onchange="fileChange(this);"/>
一个 简单、轻便、快捷 的用JS代码来判断文件大小的方法就OK了，至于ActiveXObject对象感兴趣的可以去深究，它可以根据入参的不同返回不同的对象，通常该对象的功能和作用也是非常有用和强大的。