javascript实现限制上传文件大小

2019-11-20 13:12:45

字体：大中小

来源：转载

供稿：网友

前言：

　　项目中经常用到需要上传文件、照片等功能，同时需要限制所上传文件的大小。很多插件都会采用后台请求验证，前端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" 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代码

复制代码代码如下:

　　一个简单、轻便、快捷的用JS代码来判断文件大小的方法就OK了，至于ActiveXObject对象感兴趣的可以去深究，它可以根据入参的不同返回不同的对象，通常该对象的功能和作用也是非常有用和强大的。

本文内容就到这里了，是不是非常简单实用的代码呢，希望大家能够喜欢。

上一篇：javascript实用方法总结

下一篇：jquery实现鼠标滑过显示提示框的方法