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

Question

我有一个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。
有什么建议？

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

我认为您意识到只有少数浏览器支持此功能。到现在为止，大多数都是Firefox和Chrome，也可以成为歌剧。

PSURL.createObjectURL（）方法已从MediaStream接口中删除。该方法已在2013年弃用，并通过将流分配给HTMLMediaElement.srcObject来取代。删除了旧方法，因为它不太安全，需要调用URL.revokeOjbectURL（）才能结束流。其他用户代理已弃用（Firefox）或已删除（Safari）此功能。