Js控制文件上传的大小和文件类型

<meta charset="utf-8">

<html>

<head>

    <meta charset="utf-8" />

    <title>文件上传限制</title>

    <script src="[http://libs.baidu.com/jquery/1.9.1/jquery.min.js](http://libs.baidu.com/jquery/1.9.1/jquery.min.js)"></script>

    <script type="text/javascript">

        var size = 1;

        var fileExtensions = ".zip|.rar|.pdf|.xls|.txt|.doc|.jpg|.jpeg|.bmp|.gif|.png";

        $(function () {

            $("[type=file]").change(function () {

                checkFile(size, fileExtensions);

            });

        })

        function checkFiles(filesMaxSize, filesAllow) {

            var fileObjs = $("[type=file]");

            var maxSize = filesMaxSize * 1024 * 1024;

            var fileExtensionArr = filesAllow.split("|");

            var fileExtensionAllow = false;

            if (fileObjs.length > 0) {

                fileObjs.each(function () {

                    var $fileObj = $(this);

                    for (var i = 0; i <= this.files.length; i++) {

                        var file = this.files.item(i);

                        if (file) {

                            var size = file.size;

                            //1.0-过滤文件大小

                            if (size > maxSize) {

                                alert("文件大小超过限制，不能超过" + filesMaxSize + "M");

                                $fileObj.val("");

                                return false;

                            };

                            //2.0 检查扩展名

                            var pos = file.name.lastIndexOf(".");

                            var extension = file.name.substring(pos, file.name.length);

                            fileExtensionArr.forEach(function (n) {

                                if (n.toLowerCase() == extension.toLowerCase()) {

                                    fileExtensionAllow = true;

                                };

                            });

                            if (!fileExtensionAllow) {

                                alert("该文件类型不支持，仅支持以下文件类型" + filesAllow);

                                $fileObj.val("");

                                return false;

                            };

                        };

                    };

                });

            }

            else {

            };

        }

    </script>

</head>

<body>

    <input type="file" name="file1" />

    <input type="file" name="file3" />

    <input type="file" name="file2" />

</body>

</html>
Js控制文件上传的大小和文件类型

推荐阅读更多精彩内容
