在使用 Javascript 上传之前检查图像的宽度和高度

小编典典

在使用 Javascript 上传之前检查图像的宽度和高度

all

我有一个 JPS，用户可以在其中放置图像：

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

我写了这个js：

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;
}

这可以很好地检查文件类型和大小。现在我想检查图像的宽度和高度，但我做不到。
我试过了，target.files[0].width但我得到了undefined。用其他方式我得到0.
有什么建议么？

阅读 80

2022-08-05

共1个答案

小编典典

该文件只是一个文件，您需要像这样创建一个图像：

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;
    }
});

演示：http: //jsfiddle.net/4N6D9/1/

我认为您意识到这仅在少数浏览器中受支持。主要是firefox和chrome，现在也可以是opera。

PS 该URL.createObjectURL()方法已从MediaStream 界面中删除。此方法已在 2013
年弃用，并通过将流分配给HTMLMediaElement.srcObject.
旧方法已被删除，因为它不太安全，需要调用URL.revokeOjbectURL()来结束流。其他用户代理已弃用 (Firefox) 或删除
(Safari) 此功能。

如需更多信息，请参阅此处。

2022-08-05