HTML5を使用してクライアントでファイルサイズをチェックするJavaScriptの方法

input要素を使用してファイルを選択する方法:

<input type="file" id="fileInput" />

JavaScriptを使用してファイルサイズをチェックする方法:

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  var file = fileInput.files[0];
  var fileSize = file.size; // ファイルサイズを取得
  if (fileSize > 1024) {
    console.log('ファイルサイズが大きすぎます。');
  } else {
    console.log('ファイルサイズは許容範囲です。');
  }
});

上記のコードでは、input要素のchangeイベントを監視し、選択されたファイルのサイズを取得します。ファイルサイズが1024バイトより大きい場合は、メッセージを表示します。

注意事項:

ファイルサイズはバイト単位で返されます。
サイズの制限やバリデーションを行いたい場合は、適切な条件文を追加してください。
ブラウザの互換性に注意してください。File APIは主要なモダンブラウザでサポートされていますが、一部の古いブラウザでは機能しない場合があります。

この方法を使用すると、クライアント側でファイルのサイズを簡単にチェックできます。必要に応じて、他のファイルメタデータ（ファイルタイプ、最終更新日など）も取得できます。