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

 jQueryが使えない場面があるかもしれない・・！

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

jQueryでFileのupload時に選択した画像をプレビューする機能を実装する

複数のアップロードのプレビューも想定して以下の記事も書きました。

jQueryで複数のfileのupload前にプレビューする機能を実装する

導入

input=fileのプレビュー機能の記事にアクセスが増えてきたので、使う場面があるのかわかりませんが、javascriptのみでプレビュー機能を実装してみます。

HTML

<input type="file" onChange="imgPreView(event)">
<div id="preview"></div>

Javascript

function imgPreView(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  var preview = document.getElementById("preview");
  var previewImage = document.getElementById("previewImage");
  
  if(previewImage != null) {
    preview.removeChild(previewImage);
  }
  reader.onload = function(event) {
    var img = document.createElement("img");
    img.setAttribute("src", reader.result);
    img.setAttribute("id", "previewImage");
    preview.appendChild(img);
  };

  reader.readAsDataURL(file);
}

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

使う場面あるのか、とか書きながら、vue.jsとかelectronを使う時には重宝してたりします。

今日はこの辺で