JavaScript を使用してアップロードする前に画像のサイズを検証する方法

JavaScript を使用したアップロード前の画像サイズの検証

ユーザーが画像サイズのガイドラインを遵守していることを確認するには、アップロードする前に画像の幅と高さを確認することが重要です.

ファイルの検証

既存のコードは、ファイルの種類とサイズを検証します。画像の寸法チェックを追加するには、アップロードされたファイルから画像オブジェクトを作成する必要があります。

createObjectURL() の使用

最新のブラウザの createObjectURL() メソッドを使用すると、ファイルから一時 URL オブジェクトを作成します。次に、Image オブジェクトを使用して画像を非同期的にロードできます。

<code class="javascript">const file = target.files[0];
const objectUrl = URL.createObjectURL(file);

const img = new Image();
img.onload = () => {
  console.log(`Width: ${img.width}, Height: ${img.height}`);
  URL.revokeObjectURL(objectUrl);
};

img.src = objectUrl;</code>

考慮事項

• createObjectURL() は、Firefox、Chrome などの最新のブラウザーでのみサポートされています。
• 終了時に一時 URL を解放するには、URL.revokeObjectURL() メソッドを呼び出す必要があります。

デモ

ここで実際の例を参照してください: https://jsfiddle.net/4N6D9/1/

注: 前述したように、このアプローチはブラウザー固有であり、すべてのプラットフォームで一貫して機能するとは限りません。 .

以上がJavaScript を使用してアップロードする前に画像のサイズを検証する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。