JavaScriptでファイルサイズを解析する方法

2024-02-10 02:56 JavaScript ファイルサイズ 解析

ファイルサイズを解析するには、次の手順を実行します。

  1. ファイルの選択: ユーザーがファイルを選択するためのHTMLのinput要素を作成します。
<input type="file" id="fileInput">
  1. ファイルの読み込み: JavaScriptを使用して、選択されたファイルを読み込みます。
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  // ファイルの読み込みと解析を行うコードをここに追加します
});
  1. ファイルサイズの取得: FileReaderオブジェクトを使用して、ファイルの内容を読み込み、ファイルサイズを取得します。
const reader = new FileReader();
reader.onload = (event) => {
  const fileData = event.target.result;
  const fileSizeInBytes = fileData.length;
  const fileSizeInKB = fileSizeInBytes / 1024;
  const fileSizeInMB = fileSizeInKB / 1024;
  console.log(`ファイルサイズ: ${fileSizeInBytes} バイト`);
  console.log(`ファイルサイズ: ${fileSizeInKB} KB`);
  console.log(`ファイルサイズ: ${fileSizeInMB} MB`);
};
reader.readAsDataURL(file);

上記のコードでは、fileInput要素のchangeイベントでファイルを読み込み、FileReaderオブジェクトを使用してファイルサイズを取得しています。onloadイベントハンドラ内で、ファイルの内容をバイト、キロバイト、メガバイト単位で表示しています。

これはファイルのバイナリデータを使用してファイルサイズを取得する方法です。もしテキストファイルのサイズを取得したい場合は、FileReaderの代わりにfetchやXMLHttpRequestを使用してファイルを非同期で読み込むこともできます。

以上がJavaScriptでファイルサイズを解析する方法の概要です。お役に立てれば幸いです。