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 相关文章推荐
js中将String转换为number以便比较
Jul 08 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
详解Javascript实践中的命令模式
May 05 Javascript
React实现动效弹窗组件
Jun 21 Javascript
React Fragment介绍与使用详解
Nov 11 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 判断常量,变量和函数是否存在
2009/04/26 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
js实现打字小游戏
2019/12/17 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
django框架如何集成celery进行开发
2017/05/24 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
校园门卫岗位职责
2013/12/09 职场文书
采购员的工作职责
2013/12/26 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2014年文秘工作总结
2014/11/25 职场文书
护士年终考核评语
2014/12/31 职场文书
给老婆的保证书
2015/01/16 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
解析python中的jsonpath 提取器
2022/01/18 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
MySQL 条件查询的常用操作
2022/04/28 MySQL