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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
图解javascript作用域链
May 27 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jQuery 使用手册(四)
2009/09/23 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
讲解Python中的递归函数
2015/04/27 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
小学生寒假家长评语
2014/04/16 职场文书
简单的辞职信模板
2015/05/12 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
暑假生活随笔
2015/08/15 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis