Webアプリケーションやサービスサイトの開発などでは、画像のアップロード機能といった要件が求められることもあります。そんな時はHTMLのinput要素を使ってローカルファイルをアップロードさせるようにするのですが、アップロードした画像ファイルをプレビューとしてウェブページ上に表示させたいという場合もあります。   今回はJavascriptとFile APIという機能を使って、ローカルの画像ファイルをウェブページ上に表示させてブラウザで見れるようにしてみたいと思います。   まずはHTMLを見ていきます。今回は必要最小限のものにしているためかなりシンプルです。インプット要素となる「input type="file"」とプレビュー表示用のimg要素、そしてリセット用のbutton要素の3つになります。 【HTML】※一部省略

<input type="file" id="input" value="">
<img src="" id="preview" alt="Image">
<button id="button">画像を削除</button>

  そのうち、img要素とbutton要素についてはあらかじめ非表示にしておきます。 【CSS】

img,
button {
 display: none;
}

  次にJavascriptでファイルがセットされた時の各要素の振る舞いを設定していきます。今回はそれぞれの要素のDOMを操作していくことになります。あらかじめ各要素のDOMを取得しておきます。ここでは、input要素のchangeイベントで発火するようにしています。 【Javascript】

const preview = document.getElementById('preview');
const input = document.getElementById('input');
const button = document.getElementById('button');
input.addEventListener('change', function(event){
 const fileData = event.target.files[0];
 if(fileData.type.match('image/*')) {
  const fileReader = new FileReader();
  fileReader.addEventListener('load', function(){
   preview.setAttribute('src', fileReader.result);
   preview.style.display = 'inline';
   button.style.display = 'inline';
  });
  if(fileData) {
   fileReader.readAsDataURL(fileData);
  }
 } else {
  alert('ファイル形式が画像ではありません');
  preview.setAttribute('src', '');
  preview.style.display = 'none';
  button.style.display = 'none';
  input.value = '';
 }
});
button.addEventListener('click', function(){
 preview.setAttribute('src', '');
 preview.style.display = 'none';
 button.style.display = 'none';
 input.value = '';
});

  まず、input要素にファイルがセットされたら、そのDOMにある「files」のところからファイルの情報を取得しておきます。実際にイベントオブジェクトから参照すると、このようにファイルデータの詳細が確認できます。この時に画像形式であれば、typeの値が「image/jpg」や「image/png」などになっています。   次に、セットされたファイルが画像形式の場合のみ処理を続けて、そうでない場合にはアラートを表示させ、セットされたファイルを削除するようにしておきます。処理の中では、まず「new FileReader()」でファイルを読み込んでいきます。そして読み込みが完了したら、その結果をプレビュー用のimg要素のsrcの値に入るようにします。合わせて、プレビュー画像とリセット用ボタンも表示させます。   最後に、読み込まれたデータに対して、readAsDataURLメソッドを使ってbase64形式にエンコードされたURLに変換します。こうすることでimg要素のsrcの値として機能するようになります。実際に値を確認してみると、このようにエンコードされたdataURLが入っているのが確認できます。   今回はリセット用のボタンも用意しているので、クリックするとセットされたファイルの値とプレビュー用画像を非表示となるようにしておきます。   これでローカルの画像ファイルをブラウザ上に表示させることができました。今回のサンプルはこちらからご確認いただけますのでご参考にどうぞ。  

---

  今回はFile APIを使って、ローカルの画像ファイルを扱う方法についてまとめてみました。Web APIにはこのような機能が揃っているおかげでJavascriptを使って簡単に実装することができます。サービスサイトやウェブアプリケーションなどでは比較的見かける機能ですので、その時にはぜひ試してみてください。