javascript实现限制上传文件大小

143 阅读 0 评论 95 点赞

我是靠谱客的博主细心路人，最近开发中收集的这篇文章主要介绍javascript实现限制上传文件大小，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言：

　　项目中经常用到需要上传文件、照片等功能，同时需要限制所上传文件的大小。很多插件都会采用后台请求验证，前端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: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>