在使用 Javascript 上传之前检查图像的宽度和高度 [英] Check image width and height before upload with Javascript

问题描述

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

<div>照片(最大 240x240 和 100 kb):</div><input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>

我已经写了这个js:

function checkPhoto(target) {if(target.files[0].type.indexOf("image") == -1) {document.getElementById("photoLabel").innerHTML = "不支持文件";返回假；}if(target.files[0].size > 102400) {document.getElementById("photoLabel").innerHTML = "图片太大(最大 100kb)";返回假；}document.getElementById("photoLabel").innerHTML = "";返回真；}

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

解决方案

文件只是一个文件，你需要像这样创建一个图像:

var _URL = window.URL ||window.webkitURL;$("#file").change(function (e) {var 文件，img；如果((文件 = this.files[0])){img = 新图片()；var objectUrl = _URL.createObjectURL(file);img.onload = 函数 () {警报(this.width +"+ this.height)；_URL.revokeObjectURL(objectUrl);};img.src = objectUrl;}});

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

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

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

有关详细信息，请参阅此处.

I have a JPS with a form in which a user can put an image:

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

I have written this 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;
}

which works fine to check file type and size. Now I want to check image width and height but I cannot do it.
I have tried with target.files[0].width but I get undefined. With other ways I get 0.
Any suggestions?

解决方案

The file is just a file, you need to create an image like so:

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

Demo: http://jsfiddle.net/4N6D9/1/

I take it you realize this is only supported in a few browsers. Mostly firefox and chrome, could be opera as well by now.

P.S. The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to HTMLMediaElement.srcObject. The old method was removed because it is less safe, requiring a call to URL.revokeOjbectURL() to end the stream. Other user agents have either deprecated (Firefox) or removed (Safari) this feature feature.

For more information, please refer here.

这篇关于在使用 Javascript 上传之前检查图像的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！