忘れないように記録しとこ

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

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

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

fileのアップロード時にプレビューする機能を実装した

複数のinput=fileに画像プレビューする機能を設置する

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

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

 

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

今日はこの辺で

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.