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

今日はこの辺で

2 のコメント

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください