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 相关文章推荐
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
JavaScript异步加载问题总结
Feb 17 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
js实现炫酷光感效果
Sep 05 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
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python安装twisted的问题解析
2018/08/21 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python实现网站微信登录的示例代码
2019/09/18 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
animation和transition的区别
2020/10/12 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
单位未婚证明范本
2014/01/18 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
天坛导游词
2015/02/02 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
JavaScript的Set数据结构详解
2022/02/18 Javascript