アップロードされた画像ファイルを Data URL 形式で表示する

HTML5 で追加された FileAPI に readAsDataURL() というメソッドがあるので、コレを使うと簡単に画像の DataURL が取得できる。input[type="file"] を使うので、画像以外のファイルでも DataURL 形式にできる。

<!-- ファイルアップロード欄 -->
<p><input type="file" id="input-file"></p>

<!-- 結果表示欄 -->
<p id="result"></p>

// input[type="file"] が変更した時のイベントとして設定する
document.getElementById('input-file').addEventListener('change', () => {
  // アロー関数を function() にすれば inputFile は this に書き換え可能
  const inputFile = document.getElementById('input-file');
  // 結果表示欄
  const result = document.getElementById('result');
  
  // ファイルがなければ終了
  if(!inputFile.files.length) {
    result.style.display = 'none';
    return;
  }
  
  // ファイルを読み込む FileReader オブジェクトを生成する
  const fileReader = new FileReader();
  // ファイル読み込み完了時の処理 : event.target.result が DataURL になっている
  fileReader.onload = (event) => {
    console.log(`DataURL : ${event.target.result}`);
    result.innerHTML = event.target.result;
  };
  
  // 選択されたファイルを取得する
  const file = inputFile.files[0];
  // DataURL 形式でファイルを読み込む
  fileReader.readAsDataURL(file);
});