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

2017年8月19日

 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を使う時には重宝してたりします。

今日はこの辺で

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-JavaScript
-, , , ,