当前位置: 首页 > 编程笔记 >

javascript实现限制上传文件大小

公良弘毅
2023-03-14
本文向大家介绍javascript实现限制上传文件大小,包括了javascript实现限制上传文件大小的使用技巧和注意事项,需要的朋友参考一下

前言:

  项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端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对象感兴趣的可以去深究,它可以根据入参的不同返回不同的对象,通常该对象的功能和作用也是非常有用和强大的。

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

 类似资料:
  • 问题内容: 我在Django应用中有一个表单,用户可以在其中上传文件。 如何设置上传文件大小的限制,以便如果用户上传的文件大于我的限制,则该表格将无效并且会引发错误? 问题答案: 此代码可能会帮助:

  • 这是我的代码。我无法上传任何大小超过1 mb的文件,但我已将maxFileSize设置为50mb,请帮助,我做错了什么? 这是我的代码。我无法上传任何大小超过1 mb的文件,但我已将maxFileSize设置为50mb,请帮助,我做错了什么?

  • 什么是 Firebase 存储上传文件大小限制?我在网站上找不到该信息。

  • 我使用Spring Boot,可以发送小于1MB的图像,但当我使用大于1MB的大图像发出post请求时,会出现以下错误: 下面是我尝试的所有application.properties配置: 1 2 我还研究了在web.xml文件中更改Tomcat允许的请求大小,但我没有web.xml文件。我正在使用的Tomcat绑定到应用程序中。

  • 问题 如何限定上传文件的大小? Solution web.py 使用cgi 模块来解析用户的输入, 而 cgi 模块对最大输入大小有限制。 下面的代码限制了最大数据输入为 10MB. import cgi # Maximum input we will accept when REQUEST_METHOD is POST # 0 ==> unlimited input cgi.maxlen =

  • 问题内容: 我只想限制用户可以上传的文件的大小。 我以为maxlength = 20000 = 20k,但这似乎根本不起作用。 我在Rails上运行,而不是在PHP上运行,但是我认为在HTML / CSS客户端进行此操作要简单得多,或者使用jQuery作为最后的手段。这是如此基本,尽管必须缺少一些我不知道或不知道的HTML标记。 希望支持IE7 +,Chrome,FF3.6 +。我想我可以在需要时