js限制上传图片的格式和尺寸

最新推荐文章于 2024-08-26 17:09:23 发布

微辣米粉

最新推荐文章于 2024-08-26 17:09:23 发布

阅读量6k

点赞数

文章标签： js 上传图片

本文链接：https://blog.csdn.net/tuntun1120/article/details/53118171

版权

该博客介绍了一个使用JavaScript实现的图片上传校验功能，确保上传的图片格式为.jpg，尺寸为750x465像素。通过监听`change`事件，对输入的文件进行正则匹配验证格式，计算图片宽高检查尺寸，并限制图片大小在500KB以内。代码包括前端部分的JS脚本和HTML引用示例。

摘要由CSDN通过智能技术生成

/**
 * 校验上传的图片尺寸
 */
$("#pic").change(function() {
        var f = document.getElementById("pic").value;
        if (f == "") {
            alert("请上传图片");
            return false;
        } else {
            if (!/\.(jpg|JPG)$/.test(f)) {
                alert("图片类型必须是jpg格式");
                $("#pic").val("");
                return false;
            }
            if(pic.width!=750||pic.height!=465){
                alert("*提示：文件大小不对。您只能上传750*465尺寸的图片");
                $("#pic").val("");
                return false;
            }
    }
});



//前端页面需要添加路径，并且保证id="pic"
//<script type="text/javascript" charset="utf-8" src="${CONTEXT_PATH}/resources/js/pictureRestrict.js"></script>



// var imgSize =  document.getElementById("pic").files[0].size;
// if(imgSize>1024*500){
//     alert("图片大小要求在500KB以内");
//     $("#pic").val("");
//     return false;
// }