input type file 画像を1枚だけ表示

Question

前回の質問の続きになります。

改めて、こちらの過去記事「input type file 画像 表示」を参考に、
以下コードで、input type fileの画像プレビュー表示を実装できました。

しかし、1点不都合があります。
それは、2回目にinput fileをクリックすると、
追加でプレビュー画像が表示されてしまいます。

これを、その都度
選択した画像が一枚だけ表示するにはどうしたら良いでしょうか？

立て続けの質問になりますが、
アドバイス頂けると幸いです。

<label for='camera'><input type="file" id='camera' name='file' accept='.jpg, .jpeg'></label>

$('input[type=file]').on('change', function () {
var self=$(this);
var file = $(this).prop('files')[0];
var reader = new FileReader();
reader.addEventListener('load',e=>{
var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
var base64="data:"+file.type+";base64,"+btoa(binary);
self.after($('<img>').attr({src:base64}));
});
reader.readAsArrayBuffer(file);
});

Answer 1

$(function(){
  $('input[type=file]').on('change', function () {
    var self=$(this);
    var file = $(this).prop('files')[0];
    var reader = new FileReader();
    reader.addEventListener('load',e=>{
      self.nextAll('img').remove();//すでにある画像を削除
      self.after($('<img>').attr({src:e.target.result}));
    });
    reader.readAsDataURL(file);
  });
});

Comments

[退会済みユーザー]

ありがとうございます。
おかげさまで実装できました。

[yambejp]

ちなみにreadAsArrayBufferで受けるのは画像をバックグラウンドでサーバーに送ったりするときにつかいます。画像の表示だけならreadAsDataURLで十分です

[退会済みユーザー]

承知いたしました。
ありがとうございます。