• js检测上传文件大小


    前言:

      项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。

      代码很简单,关键就是怎么用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:	est.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=" 500px;" onchange="fileChange(this);"/>

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

    ps:欢迎转载,转载请注明出处:http://www.cnblogs.com/liuyitian/p/4275430.html

                              写作不易,难免有疏漏和错误,还请慷慨指正,不错请推荐


                                         每天多学一点点     代码少敲一点点 

  • 相关阅读:
    由sqlite3入门数据库学习
    Python"八荣八耻"
    Mysql数据导出-Ubuntu
    python-open-cv 自动人脸识别安装包
    Pymysql mysqllient 那些问题!
    MySQL查询(未完结)
    Scarpy+selenium 结合使用
    Scrapy框架的使用 -- 自动跳转链接并请求
    Scrapy框架的使用
    MySQL基础
  • 原文地址:https://www.cnblogs.com/liuyitian/p/4275430.html
Copyright © 2020-2023  润新知