如何实现前端文件上传仅接收分辨率小于1920x1080的图片

核心逻辑是在图片加载到页面前，先读取图片的原始分辨率做校验，只有符合1920x1080以下要求的图片才会被渲染到页面中：

• 先修正原HTML中accept属性的错误值，将非标准的img/jpeg改为标准MIME类型image/jpeg
• JS中新增临时图片对象读取原始分辨率的校验逻辑，校验不通过直接终止渲染，给出提示
• 相比原FileReader转base64的方案，使用URL.createObjectURL处理本地文件性能更高，且用完后主动释放内存避免资源浪费

完整修改后的代码 #

HTML代码 #

<input type="file" id="file" accept="image/png, image/jpeg">

JavaScript代码 #

function Read() {
    const selectFile = document.getElementById("file").files[0];
    // 未选中文件直接返回
    if (!selectFile) return;

    // 创建临时图片对象读取原始分辨率
    const tempImage = new Image();
    const tempUrl = URL.createObjectURL(selectFile);

    tempImage.onload = function () {
        // 及时释放临时URL占用的内存
        URL.revokeObjectURL(tempUrl);

        // 读取图片原始宽高，不受样式影响更准确
        const originWidth = tempImage.naturalWidth;
        const originHeight = tempImage.naturalHeight;

        // 分辨率校验：宽高均小于1920*1080才符合要求
        if (originWidth >= 1920 || originHeight >= 1080) {
            alert("请上传分辨率小于1920x1080的图片");
            return;
        }

        // 校验通过，将图片插入页面
        const renderImage = document.createElement("img");
        renderImage.src = tempUrl;
        document.body.appendChild(renderImage);
    }

    // 非图片文件加载失败的异常处理
    tempImage.onerror = function () {
        URL.revokeObjectURL(tempUrl);
        alert("选中的文件不是有效的图片文件");
    }

    tempImage.src = tempUrl;
}

可选优化方案 #

如果你不想限制用户上传的图片分辨率，仅需要避免大图片撑满页面，不需要修改上传逻辑，直接给全局图片加如下CSS样式即可：

img {
    /* 宽度最大撑满父容器，高度自适应不会变形 */
    max-width: 100%;
    height: auto;
    /* 额外限制高度不超过浏览器视口高度可以加上下面一行 */
    /* max-height: 100vh; */
}

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