ブラウザからファイル内容を読み込む

ブラウザからファイルのデータを読み込むサンプルコードのメモです。

ブラウザからファイル内容を読み込む
サンプルコード
サンプルコードを実行
関連

サンプルコード

<input type="file">タグとFileReaderAPI を組み合わせて実現できます。下記サンプルではreadAsText()メソッドでテキストファイルを読み込んでいますが、他にもバイナリデータを読み込むメソッドなども用意されています。参考

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <!-- ファイルを読み込むINPUT -->
  <input type="file" onchange="readFile(event)">
  
  <!-- .txtファイルを読み込むINPUT -->
  <!-- <input type="file" onchange="readFile(event)" accept=".txt"> -->

  <script type="text/javascript">
  /**
   * ファイルを読み込む関数
   */
  function readFile(e) {
    const file = e.target.files && e.target.files.length >= 1 ? e.target.files[0] : null;
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      // e.target.result に読込結果が格納されています:
      alert("ファイル内容: " + e.target.result);
    };
    reader.readAsText(file); // テキストとしてファイルを読み込み
  }
  </script>
</body>

</html>

サンプルコードを実行

以上です。

pure JavaScript

ブラウザからファイル内容を読み込む

サンプルコード

サンプルコードを実行

関連