JavaScriptでファイルサイズを検証する方法

ファイル選択のイベントリスナーを設定する方法:

const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileSize = file.size; // ファイルサイズを取得
  // ファイルサイズを検証する処理を追加
});

ファイルサイズの制限を設定する方法:

const maxSizeInBytes = 10 * 1024 * 1024; // 10MBをバイト単位で表現
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const fileSize = file.size;
  if (fileSize > maxSizeInBytes) {
    // ファイルサイズが制限を超えている場合の処理
  } else {
    // ファイルサイズが制限以内の場合の処理
  }
});

ファイルの非同期読み込みとファイルサイズの検証:

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}
fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const fileData = await readFile(file);
  const fileSizeInBytes = fileData.length;
  // ファイルサイズを検証する処理を追加
});

これらのコード例を使用すると、JavaScriptを使用してファイルのサイズを検証することができます。必要に応じて、実際の検証ロジックを追加してください。また、ファイルサイズの制限値やエラーハンドリングなど、特定の要件に合わせてカスタマイズすることもできます。

以上が、JavaScriptでファイルサイズを検証する方法の簡単な解説とコード例です。