代码改变世界

一个简单的 Javascript 方法，验证上传的图片文件的扩展名是否正确

2012-08-23 15:37  音乐让我说  阅读(298)  评论(0)  编辑  收藏  举报

注意：经过优化以后，推荐下面的版本。

 

/**
* 检查上传的文件的扩展名是否正确
* @param {string} filePath
* @param {boolean} isAllowEmpty 
* @param {Array} allowFileExtensions
*/
function checkUploadedFileExtension(filePath, isAllowEmpty, allowFileExtensions) {
    var resultJson = {};
    if (typeof (filePath) == "undefined" || filePath == null || filePath == "") {
        if (isAllowEmpty) {
            resultJson.success = true;
            resultJson.message = "successfully";
        }
        else {
            resultJson.success = false;
            resultJson.message = "请选择一个文件文件！";
        }
        return resultJson;
    }
    var validFileExtensions = allowFileExtensions || new Array(".jpg", ".jpeg", ".png", ".gif", ".bmp");
    var errorMessage = "文件的格式不正确，支持 " + validFileExtensions.join(" | ") + " 格式的文件！";
    filePath = filePath.toString().toLowerCase();
    var tempIndex = filePath.lastIndexOf(".");
    if (tempIndex <= 0) {
        resultJson.success = false;
        resultJson.message = errorMessage;
        return resultJson;
    }
    var extension = filePath.substr(tempIndex);
    var flag = false;
    for (var i = 0, len = validFileExtensions.length; i < len; i++) {
        if (extension == validFileExtensions[i]) {
            flag = true;
            break;
        }
    }
    if (flag) {
        resultJson.success = true;
        resultJson.message = "successfully";
    }
    else {
        resultJson.success = false;
        resultJson.message = errorMessage;
    }
    return resultJson;
}

 

 

直接贴代码了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        /// <summary>
        /// 检查上传的图片的扩展名是否正确
        /// </summary>
        /// <param name="imgPath">用户选择的图片所在的磁盘路径，String 类型，不能 null。</param>
        /// <param name="isAllowEmpty">此次上传用户是否可以不用选择图片, Boolean 类型，默认为 false。</param>
        /// <param name="allowImgExtensions">允许的图片的扩展名，Array 类型，可以为 null。为 null 表示由方法自动判断</param>
        /// <returns>JSON 格式的结果</returns>
        function checkUploadedImageExtension(imgPath, isAllowEmpty, allowImgExtensions)
        {
            var resultJson = {};
            if (imgPath == undefined || imgPath == null || imgPath == "")
            {
                if (isAllowEmpty)
                {
                    resultJson.success = true;
                    resultJson.message = "successfully";
                }
                else
                {
                    resultJson.success = false;
                    resultJson.message = "请选择一个图片文件！";
                }
                return resultJson;
            }
            var validImgExtensions = allowImgExtensions || new Array(".jpg", ".jpeg", ".png", ".gif", ".bmp");
            var errorMessage = "图片的格式不正确，支持 " + validImgExtensions.join(" | ") + " 格式的图片！";
            imgPath = imgPath.toString().toLowerCase();
            var tempIndex = imgPath.lastIndexOf(".");
            if (tempIndex <= 0)
            {
                resultJson.success = false;
                resultJson.message = errorMessage;
                return resultJson;
            }
            var extension = imgPath.substr(tempIndex);
            var flag = false;
            for (var i = 0, len = validImgExtensions.length; i < len; i++)
            {
                if (extension == validImgExtensions[i])
                {
                    flag = true;
                    break;
                }
            }
            if (flag)
            {
                resultJson.success = true;
                resultJson.message = "successfully";
            }
            else
            {
                resultJson.success = false;
                resultJson.message = errorMessage;
            }
            return resultJson;
        }
    </script>
    <script type="text/javascript">
        function checkCurrentForm()
        {
            var flag = checkHeaderImageExtension();
            if(!flag)
            {
                return false;
            }
            // validate other property
            // ...
            alert("验证成功，即将提交！");
            return true;
        }
        function checkHeaderImageExtension()
        {
            var imgPath = document.getElementById("fileImg").value;
            var resultJson = checkUploadedImageExtension(imgPath, false, new Array(".jpg", ".png"));
            if (resultJson.success)
            {
                return true;
            }
            else
            {
                alert(resultJson.message);
                return false;
            }
        }
    </script>
</head>
<body>
    <br /><br />
    <form method="post" action="http://www.baidu.com" enctype="multipart/form-data" onsubmit="return checkCurrentForm();">
        请选择一个图片：<input type="file" name="fileImg" id="fileImg" onchange="checkHeaderImageExtension();" />
        <br /><br />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

为空时的验证：

图片格式不正确时：

验证通过后：

谢谢浏览！