小编典典

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

javascript

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


阅读 293

收藏
2020-04-25

共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)此功能。

2020-04-25