JavaScript を使用してアップロードする前に画像のサイズを確認するにはどうすればよいですか?

JavaScript を使用してアップロードする前に画像のサイズを確認する

ユーザーが不適切な画像をアップロードしないようにするには、画像のアップロードを許可する前に検証手段を確立することが重要です。この記事では、JavaScript で画像の幅と高さをチェックするプロセスについて説明します。

既存の JavaScript コード:

提供されている JavaScript コードは、ファイルの種類と高さを効果的にチェックします。アップロードされた画像のサイズ。ただし、寸法検証はまだ実装されていません。

<code class="javascript">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;
}</code>

画像寸法検証の実装:

画像寸法を検証するには、画像オブジェクトを手動で作成する必要があります。アップロードされたファイル。これを行うのは次の JavaScript コードです:

<code class="javascript">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;
    }
});</code>

デモと互換性:

このコードの動作例は、JSFiddle: http://jsfiddle で参照できます。 net/4N6D9/1/.

このメソッドは、主に Firefox と Chrome などの特定のブラウザでのみサポートされていることに注意することが重要です。

追加メモ:

URL.createObjectURL() メソッドを使用する前に、ストリームを HTMLMediaElement.srcObject に割り当てるために、このメソッドが非推奨になったことに注意してください。詳細については、公式ドキュメントを参照してください。

以上がJavaScript を使用してアップロードする前に画像のサイズを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。