JavaScript でアップロード検証のために画像のサイズを取得するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript でアップロード検証のために画像のサイズを取得するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-10-31 10:11:18

オリジナル

796 人が閲覧しました

How to Retrieve Image Dimensions for Upload Validation in JavaScript?

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

JavaScript で画像アップロードフォームを実装する場合、アップロードされた画像が特定のサイズ要件を満たしていることを確認することが重要です。この記事では、画像サイズの検証中に直面する一般的な問題、つまり選択した画像の幅と高さの取得について説明します。

問題

次の JavaScript 関数は、チェックするように設計されています。ファイルの種類とサイズ、画像の寸法の取得に失敗します:

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        // Code to handle file type
    }
    if(target.files[0].size > 102400) {
        // Code to handle image size
    }
    // No code yet for image width and height
}</code>

ログイン後にコピー

解決策

画像の寸法を取得するには、選択したファイルから画像オブジェクトを作成する必要があります。これは、URL.createObjectURL() メソッドを使用して実現できます。

<code class="javascript">var _URL = window.URL || window.webkitURL;
$(function() {
    $("#file").change(function (e) {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            var objectUrl = _URL.createObjectURL(file);
            img.onload = function () {
                console.log(this.width + " " + this.height);
                _URL.revokeObjectURL(objectUrl);
            };
            img.src = objectUrl;
        }
    });
});</code>

ログイン後にコピー

このコードスニペットは、Image オブジェクトを作成し、img.src を使用して選択したファイルを読み込みます。画像がロードされると、コールバック関数 img.onload が実行され、画像の幅と高さにアクセスできます。

互換性に関する注意

URL.createObjectURL( ) メソッドは、ブラウザー間で広くサポートされているわけではありません。主に Firefox と Chrome でサポートされています。他のブラウザでは、画像サイズの検証に別の方法が必要になる場合があります。

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