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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>画像の縦横サイズチェック</title>
</head>
<body>
  <form>
    <input type="file" id="fileInput" accept="image/*">
  </form>

  <script>
    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);
  </script>
</body>
</html>

<form>
  <input type="file" id="fileInput" accept="image/*">
</form>

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);