如何在 JavaScript 中检索图像尺寸以进行上传验证？

使用 Javascript 验证上传的图像尺寸

在 Javascript 中实现图像上传表单时，确保上传的图像满足特定的尺寸要求至关重要。本文探讨了图像尺寸验证过程中面临的常见问题：检索所选图像的宽度和高度。

问题

以下 Javascript 函数，旨在检查文件类型和大小，无法检索图像尺寸：

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        // Code to handle file type
    }
    if(target.files[0].size > 102400) {
        // Code to handle image size
    }
    // No code yet for image width and height
}</code>

解决方案

要检索图像尺寸，我们需要从所选文件创建一个图像对象。这可以使用 URL.createObjectURL() 方法来实现：

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

此代码片段创建一个 Image 对象并使用 img.src 加载所选文件。图片加载完成后，会执行回调函数 img.onload，我们可以在其中获取图片的宽度和高度。

兼容性说明

URL.createObjectURL( ) 方法并未得到跨浏览器的普遍支持。它主要在 Firefox 和 Chrome 中受支持。对于其他浏览器，可能需要替代方法来验证图像大小。

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