首页 >web前端 >js教程 >如何使用 JavaScript 在上传之前验证图像尺寸?

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

Susan Sarandon
Susan Sarandon原创
2024-11-01 12:08:02550浏览

How to Verify Image Dimensions Before Uploading with 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn