【jQuery不要】javascriptだけで複数のfileの画像プレビュー機能を実装する

 最近はjQueryを使ってない

以前、下記のような記事を書いていました。

【jQuery不要】javascriptだけでinput=fileの画像プレビュー機能を実装する

最近はVue.jsばっかり使っているので、jQueryを使えない場面というよりも使わない場面の方が多くなっています。

今回は、上記の記事を利用してjQueryを使わずに複数のfileの画像プレビュー機能を実装する方法を記事にしたいと思います。

導入方法

複数のfileフォームを準備する

fileフォームにimgPreViewというchangeイベントを設置し、プレビュー先のIDを引数に設定します。

<div>
  <input type="file" onChange="imgPreView(event, 'preview1')">
  <div id="preview1"></div>
<div>
<div>
  <input type="file" onChange="imgPreView(event, 'preview2')">
  <div id="preview2"></div>
<div>
<div>
  <input type="file" onChange="imgPreView(event, 'preview3')">
  <div id="preview3"></div>
<div>  

imgPreViewを実装する

function imgPreView(event, targetId) {
  var file = event.target.files[0];
  var reader = new FileReader();
  var preview = document.getElementById(targetId);
  var previewImage = document.getElementById("previewImage-"+targetId);

  if(previewImage != null) {
    preview.removeChild(previewImage);
  }

  reader.onload = function(event) {
     var img = document.createElement("img");
     img.setAttribute("src", reader.result);
     img.setAttribute("id", "previewImage-"+targetId);
     preview.appendChild(img);
  };

  reader.readAsDataURL(file);
}

デモ

See the Pen xoWmgg by カバの樹 (@kabanoki) on CodePen.0

まとめ

jQueryを使わずに複数のfileの画像プレビュー機能を実装する方法でした。

実は今回ご紹介した方法以外にも複数の方法で実装したサンプルがあるのですが、それは今後何かのタイミングで記事にできたらなあなんて思っています。

昔の記事を書いた当時と比べて、もはやjQueryが必須という時代では無くなってしまいました。

とか言いつつ、また未来ではjQueryが必須になっているのかもしれません。

PS. 実は別の記事の投稿を控えていたのですが、コメントで質問を貰って、ウキウキで記事を差し替えました。
こういう反応を貰えると嬉しいですね（チラッ