javascript实现限制上传文件大小


Posted in Javascript onFebruary 06, 2015

前言:

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

<input type="file"  style="width: 500px;" onchange="fileChange(this);"/>

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

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

Javascript 相关文章推荐
jQuery load方法用法集锦
Dec 06 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
js实现简单的验证码
Dec 25 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 #Javascript
javascript去除字符串左右两端的空格
Feb 05 #Javascript
jQuery判断对象是否存在的方法
Feb 05 #Javascript
jquery实现对联广告的方法
Feb 05 #Javascript
jquery实现在光标位置插入内容的方法
Feb 05 #Javascript
Jquery中offset()和position()的区别分析
Feb 05 #Javascript
JS实现一个按钮的方法
Feb 05 #Javascript
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python操作串口的方法
2015/06/17 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
python实现分页效果
2017/10/25 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
关于numpy数组轴的使用详解
2019/12/05 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
酒鬼酒广告词
2014/03/21 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
经营理念口号
2014/06/21 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL