JavaScript表单图片尺寸验证问题：已完成扩展名与大小验证，卡壳于尺寸校验

嘿，我看到你已经顺利搞定了图片扩展名和大小的校验，唯独卡在尺寸验证这一步——问题很明确：File对象本身并没有height和width属性，你直接拿这两个属性判断肯定得不到正确结果呀！

要获取图片的尺寸，我们需要把选中的图片文件加载到一个Image对象里，等图片加载完成后，再从这个Image对象上读取宽高信息。下面是修改后的完整代码：

修正后的HTML #

<input type="file" name="files[]" onchange="validatePassport()" id="passportpic" required/>

修正后的JavaScript函数 #

function validatePassport() {
    var fileInput = document.getElementById("passportpic");
    var file = fileInput.files[0];
    
    // 先做格式校验
    var t = file.type.split('/').pop().toLowerCase();
    if (t != "jpeg" && t != "jpg" && t != "png") {
        alert('Please select a valid image file');
        fileInput.value = '';
        return false;
    }

    // 先做大小校验
    if (file.size > 209715) {
        alert("Max Upload size is 200kb only");
        fileInput.value = '';
        return false;
    }

    // 创建Image对象来获取尺寸
    var img = new Image();
    // 将File对象转为可访问的临时URL
    img.src = URL.createObjectURL(file);

    img.onload = function() {
        // 图片加载完成后才能获取到有效宽高
        if (this.height > 200 || this.width > 200) {
            alert("Height and Width must not exceed 200px.");
            fileInput.value = '';
            return false;
        }
        // 释放临时URL，避免内存泄漏
        URL.revokeObjectURL(img.src);
        return true;
    }

    // 处理图片加载失败的异常情况
    img.onerror = function() {
        alert("Failed to load the image, please try another one.");
        fileInput.value = '';
        URL.revokeObjectURL(img.src);
        return false;
    }
}

关键说明 #

• 格式和大小校验可以同步完成，不需要等待图片加载
• 尺寸校验必须放在img.onload事件回调里，只有图片加载完成后，宽高属性才会有有效值
• 使用URL.createObjectURL()把File对象转换成临时可访问的URL，让Image元素能加载本地选中的图片
• 记得用URL.revokeObjectURL()释放临时URL，避免浏览器内存占用过高

这样修改后，就能正确校验图片的尺寸啦！

内容的提问来源于stack exchange，提问作者John Charpata