前回の記事では、PC内のjsonファイルを読み込んで画面に表示するという処理をつくってみました。

[JavaScript] サーバ処理を介さずPC内のjsonファイルを画面に表示する - diwao日記

今回は前回のコードをちょっとアレンジして、PC内の画像ファイルを読み込んでブラウザに表示するというの処理を作ってみたいと思います。では早速いってみよー。

readAsDataURLでファイルの内容を取得する

ファイルの読み込みにはFileReaderオブジェクトを使います。input[type=“file”]要素でFileオブジェクトを取得するんでしたね。この辺は前回と同じなので細かい説明は割愛。

さて、前回はファイルの内容をテキストとして表示しました。読み込むファイルの中身がテキストならこれで良いのですが、今回は画像を表示するのでそのままではダメそうです。そう、imgタグのsrcに設定するファイルのパスが必要になることは想像に難くありません。

srcに設定するパスを取得するのにはFileReaderオブジェクトのreadAsDataURLメソッドを使います。これは読み込んだファイルを示すdata: URLの文字列（base64エンコーディングされたもの）を取得するメソッドです。取得した結果はFileTeadオブジェクトのresultプロパティに格納されます。

コードとサンプル

と、いったことを踏まえて作ったサンプルがこちら。画像ファイルを選択すると、その画像が画面に表示されるという簡単なものです。

<input type="file" id="file" class="btn" accept="image/*">
<div id="result" class="result">ここに画像が表示されます</div>

window.onload = () => {
  const file = document.getElementById('file');
  const result = document.getElementById('result');
  const reader = new FileReader();

  // ファイルが選択されたらファイルのdata:URL文字列を保存
  file.addEventListener('change', function(e){
    reader.readAsDataURL(e.target.files[0]);
  });

  // ファイルの読み込みが終わったら内容を表示
  reader.onload = function(e){
    result.innerHTML = `<img src="${e.target.result}" alt="">`;
  };
};

See the Pen フロントから画像を読み込む by diwao (@diwao) on CodePen.

input要素で選択した画像ファイルをreadAsDataURLで取得し、その値をimgタグのsrcに突っ込んで画像を表示させています。アップロード前のプレビューとか、何かと使い所はありそうなので覚えておいて損はないかと。

参考