原生js面向对象版的上传图片检测

最新推荐文章于 2024-11-01 17:48:15 发布

weixin_30514745

最新推荐文章于 2024-11-01 17:48:15 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webFrontDev/archive/2012/11/24/2786020.html

本文介绍了一种用于检测上传图片的大小和格式的方法，确保图片符合预设的标准，以优化网站资源管理和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
     * 上传图片检测
     * @param allowImgFileSize 允许的图片文件大小（kb）
     * @param allowImgExt 允许的图片格式("." + ext + "|")
     * @constructor
     */
    function UploadImgCheck(allowImgFileSize, allowImgExt) {
        //私有变量和私有函数
        var imgObj = new Image(),
                allImgExt = ".jpg|.jpeg|.gif|.bmp|.png|", //全部图片格式
                fileObj, imgFileSize, imgWidth, imgHeight, fileExt, errMsg, fileMsg, hasCheked, isImg = false;      //图片相关属性
        allowImgFileSize = allowImgFileSize || 100;
        imgObj.onerror = function () {
            errMsg = '\n图片加载出错!';
        };
        //检测图片属性
        function checkImgProper(obj) {
            fileObj = obj;
            try {
                //for FF,Chrome
                imgFileSize = Math.round(fileObj.files[0].size / 1024);
            } catch (ex) {
                //for MSIE
                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                var file = fileSystem.GetFile(fileObj.value);
                imgFileSize = Math.round(file.Size / 1024);
            }
            if (allowImgFileSize !== "0" && imgFileSize > allowImgFileSize) {
                errMsg = "图片文件大小超过限制。请上传小于" + allowImgFileSize + "KB的图片";
                showcheckdMsg(errMsg);
                obj.value = "";
            }
        }

        //显示信息
        function showcheckdMsg(msg) {
            //TODO
            alert(msg);
        }

        //预览图片
        function preshowImg(str) {
            //TODO
        }

        //特权方法（公有方法）
        //检测图片类型
        this.checkImgExt = function (obj) {
            fileExt = obj.value.substring(obj.value.lastIndexOf(".") + 1);
            //检测格式是否与配置的匹配
            if (allImgExt.indexOf(fileExt + "|") !== -1) {
                isImg = true;
                imgObj.src = obj.value;
                checkImgProper(obj);
            } else {
                errMsg = "该文件类型不允许上传。请上传 " + allowImgExt + " 类型的文件，当前文件类型为" + fileExt;
                showcheckdMsg(errMsg);
                obj.value = "";
            }
        };
        //
        if (typeof allowImgFileSize === "undefined") {
            allowImgFileSize = fileSize;
        }
        if (typeof allowImgExt === "undefined") {
            allowImgExt = allImgExt;
        }
    }
    var imgcheck = new UploadImgCheck(20, ".jpg|.jpeg|.gif|.png|");
    document.getElementById("picuploader").onchange = function () {
        imgcheck.checkImgExt(this);
    }

转载于:https://www.cnblogs.com/webFrontDev/archive/2012/11/24/2786020.html