如何使用 JavaScript 在上传之前验证图像尺寸？

使用 JavaScript 上传之前验证图像尺寸

为了防止用户上传不合适的图像，在允许图像上传之前建立验证措施至关重要。本文将指导您完成在 JavaScript 中检查图像宽度和高度的过程。

现有 JavaScript 代码：

提供的 JavaScript 代码有效地检查文件类型和上传图像的大小。然而，尺寸验证尚未实现。

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}</code>

图像尺寸验证的实现：

要验证图像尺寸，我们需要手动创建一个图像对象上传的文件。以下 JavaScript 代码执行此操作：

<code class="javascript">var _URL = window.URL || window.webkitURL;
$('#file').change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});</code>

演示和兼容性：

您可以在 JSFiddle 上查看此代码的工作示例：http://jsfiddle。 net/4N6D9/1/.

需要注意的是，此方法仅在某些浏览器中受支持，主要是 Firefox 和 Chrome。

附加说明：

在使用 URL.createObjectURL() 方法之前，请注意该方法已被弃用，转而将流分配给 HTMLMediaElement.srcObject。如需更多信息，请参阅官方文档。

以上是如何使用 JavaScript 在上传之前验证图像尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！