HTMLのファイル選択ボタンで画像の縦横のサイズチェックをしたい

 
 


 

function checkImageSize() {
  const fileInput = document.getElementById('fileInput');
  const files = fileInput.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    // 画像ファイル以外はスキップ
    if (!file.type.startsWith('image/')) {
      continue;
    }

    const img = new Image();

    // 画像の読み込みが完了したらチェック
    img.onload = function() {
      const width = this.width;
      const height = this.height;

      // 画像サイズのチェック
      if (width > 1000 || height > 1000) {
        alert('画像の縦横サイズは最大で1000ピクセルまでです。');
        fileInput.value = '';
      }
    };

    // 画像を読み込む
    const objectUrl = URL.createObjectURL(file);
    img.src = objectUrl;
  }
}

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', checkImageSize);