ブラウザからファイル内容を読み込むの画像
芽萌丸プログラミング部 @programming
投稿日 2021/05/27

pure JavaScript

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

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

サンプルコード

<input type="file"> タグと FileReader API を組み合わせて実現できます。 下記サンプルでは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>

サンプルコードを実行

以上です。

関連


芽萌丸プログラミング部
芽萌丸プログラミング部 @programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。