選択されたファイルの内容を取得する

選択したファイルの内容を取得する

フォームでファイルをアップロード／送信するとき、input要素の「type="file"」による「ファイル選択」を使用します。
このとき、選択したファイルの内容（データ）はFileReaderオブジェクトから取得することができます。

選択したファイルのファイル名、MIMEタイプ（拡張子）、ファイルサイズ、更新日を取得したいときは、選択したタイミングでEventオブジェクトのtarget.filesプロパティから取得することができます。
詳しいは、別記事「ファイル選択時にファイル情報を取得する」を参照してください。

FileReaderオブジェクトには形式別に、ファイル内容を取得するメソッドが次の4つ用意されています。

• readAsTextメソッド – ファイル内容をテキスト形式で取得
• readAsDataURLメソッド – ファイル内容をBase64形式にエンコードし、「data:〜」で始まるURL形式で取得
• readAsArrayBufferメソッド – ファイル内容をArrayBufferオブジェクトとして取得
• readAsBinaryStringメソッド – ファイル内容をバイナリデータとして取得

今回は上の2つのメソッドを使った方法を解説していきます。
また、解説用に次のHTMLコードを使います。

HTMLコード例

<article id="content1">
	<h1>JavaScriptレシピ</h1>
	<form method="post" action="" enctype="multipart/form-data">
		<input type="file" id="upload_file" name="upload_file">
	</form>
</article>

ファイル内容をテキスト形式で取得

まずはファイル内容をテキスト形式で取得する方法から解説していきます。

フォームの入力項目「type="file"」からファイルを選択したときに、FileReaderオブジェクトのreadAsTextメソッドを使ってファイルを読み込みます。
選択するファイルは、次のようなシンプルに2行のテキストが入ったファイル（.txtファイル）を用意します。

sample.txt（アップロードするテキストファイル）

FileReaderを使った
テキストファイルからの読み込みテスト

以下のJavaScriptコードは、ページを読み込んだタイミングでファイルを選択する入力項目であるinput要素にイベントリスナー「change」を登録し、その中でファイル読み込みを実行します。
読み込んだ内容はconsole.logメソッドで出力して確認していきます。

コード例

window.addEventListener('DOMContentLoaded', function(){

  // ファイルが選択されたら実行
  document.getElementById("upload_file").addEventListener('change', function(e){

    let file_reader = new FileReader();

    // ファイルの読み込みを行ったら実行
    file_reader.addEventListener('load', function(e) {
      console.log(e.target.result);
                                    // FileReaderを使った
                                    // テキストファイルからの読み込みテスト
    });

    file_reader.readAsText(e.target.files[0]);
  });
});

イベントリスナー「change」の中のコードを解説します。

まずはFileReaderオブジェクトのインスタンスを作成して変数file_readerに入れます。

続くaddEventListenerメソッドは、FileReaderオブジェクトのインスタンスに対してファイル読み込みが成功したときに処理を実行するイベントリスナー「load」を設定します。
ここで実行する処理の中に、ファイルの内容をconsole.logメソッドで出力します。

最後に、readAsTextメソッドを使ってファイルの読み込みを実行します。
メソッドの引数にファイル（Blobオブジェクト）を渡すと読み込みを開始するので、input要素で選択したファイルをそのまま渡しています。

ファイルの読み込みが完了したタイミングで、先ほどイベントリスナーを設定した「load」が実行されます。
ファイル内のテキストデータはresultプロパティから取得することができます。

ファイル内容をURL形式で取得

続いて、readAsDataURLメソッドを使ってファイル内容をBase64にエンコードしたURL形式として取得します。
アップロードするファイルは次のPNG画像です。

以下のコードはアップロードした画像をURL形式で取得した後に、JavaScriptでimg要素を生成してアップロードした画像をページ内に表示します。
FileReaderオブジェクトのインスタンスを作成し、イベントリスナー「load」を設定するところまでは上記のコードと共通です。

コード例

window.addEventListener('DOMContentLoaded', function(){

  // ファイルが選択されたら実行
  document.getElementById("upload_file").addEventListener('change', function(e){

    let file_reader = new FileReader();

    file_reader.addEventListener('load', function(e) {
  
      // img要素を作成
      let img_element = document.createElement('img');
      img_element.src = e.target.result;
      img_element.alt = "Fox";
  
      // img要素をページに挿入
      let article_element = document.getElementById('content1');
      article_element.append(img_element);
    });
  
    // ファイル内容をBase64にエンコードし、「data:〜」で始まるURL形式で取得
    file_reader.readAsDataURL(e.target.files[0]);
  });
});

イベントリスナー「load」の中で、img要素を作成して変数img_elementに入れます。
作成したimg要素のsrc属性に対して、後述するreadAsDataURLメソッドで取得するBase64にエンコードしたURL形式のファイルデータを設定します。

その後、作成したimg要素をappendメソッドを使ってid属性「content1」を持つarticle要素の中に挿入します。
無事にimg要素が追加されると、ページ内にアップロードした画像が表示されます。

ちなみに、Base64にエンコードされたファイルデータは「data:」から始まり、ファイルの形式とエンコード形式（Base64）、そしてファイルデータという決まった順序のテキストデータになります。
上記のPNG形式の画像は次のようなテキストデータとして取得することができます。

Base64のURL形式にエンコードされたファイルデータ

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AGq 〜省略〜 sh4c3VbaNv17

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。