javascript - 预览最后上传的图片

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

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;

最佳答案

创建的<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);
});