javascript - 预览上次上传的图片

Question

我正在使用一个旧项目，我可以在其中上传许多图像，但对于这个，我只需要一张。上传后，我应该看到上传的内容(预览)。第一次上传时，我看到了图像。如果上传不同的图像，我仍然看到第一张图像。我不想这样，我需要预览最后上传的图像。

JavaScript:

$('.receipt.upload').on('change', function(e) {
  let id = e.target.id;
  let files = e.target.files;
  let image = files[0];
  let reader = new FileReader();
  reader.onload = function(file) {
    let img = new Image();
    console.log(file);
    img.src = file.target.result;
    $('.'+id).replaceWith(img);
  }
  reader.readAsDataURL(image);
  //console.log(files);
});

Rails html.erb:

<div>
  <%= image_tag('/assets/receipt/missing-receipt.jpg', class: "receipt#{contract.id}") %>
</div>

// Inside a form
<div>
  <%= f.file_field :receipt, id: "receipt#{contract.id}" , class: "receipt upload"%>
</div>

更改这些没有什么区别:

let files = e.target.files[0];
let image = files;

Answer 1

已创建 <img> img没有.className设置为<input type="file"> .id 。第二次change事件document中不存在元素与 id在jQuery()调用$('.'+id) 。

设置 .className更换元件数量img至id .

$('.receipt.upload').on('change', function(e) {
  let id = e.target.id;
  let files = e.target.files;
  let image = files[0];
  let reader = new FileReader();
  reader.onload = function(file) {
    let img = new Image();
    img.className = id; // set `img` `.className` to `id`
    console.log(file);
    img.src = file.target.result;
    $('.'+id).replaceWith(img);
  }
  reader.readAsDataURL(image);
});