[解決済み] アップロード前に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 .

何か提案はありますか？

どのように解決するのですか？

ファイルはただのファイルなので、このように画像を作成する必要があります。

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もあり得るかもしれません。

P.S. は URL.createObjectURL() メソッドが削除されました。 MediaStream インターフェース . この方法は2013年に非推奨となり、ストリームを HTMLMediaElement.srcObject . を呼び出す必要があり、安全性が低いため、旧方式は削除されました。 URL.revokeOjbectURL() でストリームを終了させます。他のユーザーエージェントでは、この機能フィーチャーを非推奨（Firefox）または削除（Safari）しています。

詳しくは、以下をご参照ください。 こちら .