JavaScriptで選択した画像ファイルをDOMに表示する方法

はじめに

<input type="file" />で選択した画像ファイルをDOMに表示する方法を紹介します。
FileReader使い方をすぐ忘れてしまうため、備忘録として残します。

デモ画像

ファイル選択から犬の画像を選択すると、DOMに表示されます。

コード

bodyの最後に選択した画像を表示してます。

const fileInput = document.getElementById('file');

// ファイルを読み込む
const loadFile = (e) => {
  const file = e.target.files[0];

  if (!file) {
    return;
  }

  const reader = new FileReader();

  reader.onload = (e) => {
    // img要素を作成
    const imgElement = document.createElement('img');
    imgElement.src = e.target.result;

    // bodyの最後に追加
    document.body.appendChild(imgElement);
  };

  reader.readAsDataURL(file);
};

// ファイルを選択した時に発火
fileInput.addEventListener('change', loadFile);

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。