JavaScript　ファイル情報を参照する：fileプロパティを使った方法

JavaScriptを使ってHTMLのinput要素で選択したファイルの情報を取得する方法について詳しく解説します。

HTMLのinput要素で選択したファイルの情報を取得するにはどうしたらいいですか？

fileプロパティを使うことで取得することができます。

fileプロパティを使ったファイル情報の取得方法

　fileプロパティとは、HTMLのinput要素で選択したファイルオブジェクトの情報を操作するためのJavaScriptのプロパティです。

　fileプロパティを使ったファイル情報の取得するにはinput要素のfilesプロパティから選択したファイルオブジェクトを取得し、そのfileプロパティを使ってファイル情報を取得します。

ファイル情報を取得するサンプル

以下は、input要素から選択したファイルの情報を取得するサンプルプログラムです。

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

<script>
  const input = document.getElementById("fileInput");
  input.addEventListener("change", function() {
    const file = input.files[0];
    console.log("File name: ", file.name);
    console.log("File size: ", file.size + "bytes");
    console.log("File type: ", file.type);
  });
</script>

　このサンプルプログラムは、HTMLのinput要素を使ってファイルを選択し、そのファイルの情報を取得するものです。

　HTMLにinput要素を作成して、id属性を”fileInput”に設定しています。このinput要素には、type属性に”file”を指定しています。これにより、ユーザーがファイルを選択するためのインターフェースが提供されます。

　最初に、input要素を取得しています。これは、document.getElementById("fileInput")で実現されます。これにより、後で追加するイベントリスナーを設定することができます。

　その後、input要素に対して、”change”イベントリスナーを追加しています。このイベントは、ユーザーがファイルを選択したときに発生するものです。リスナー関数内では、input要素のfilesプロパティから選択されたファイルの情報を取得します。files[0]とすることで、最初に選択されたファイルの情報を取得することができます。

　取得したファイルの情報を、それぞれのプロパティから取得しています。nameプロパティからファイル名、sizeプロパティからファイルサイズ（バイト単位）、typeプロパティからファイルタイプを取得しています。最後に、それぞれのプロパティから取得した値を、console.log関数を使ってログ出力しています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。