预览上次上传的图像

Preview last uploaded image

本文关键字：图像      更新时间：2023-09-26

我使用的是一个旧项目，我可以上传许多图像，但对于这个，我只需要一个。上传后，我应该看到上传了什么(预览)。当第一次上传时，我看到了图像。如果上传一个不同的图像，我仍然看到第一个图像。我不希望那样，我需要预览上次上传的图片。

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)。

设置替代元素img的.className为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);
});

你不需要FileReader…

$('.receipt.upload').on('change', function(e) {
  let {id, files} = this
  let img = new Image
  img.src = URL.createObjectURL(files[0])
  img.className = id
  $('.'+id).replaceWith(img)
})
相关文章：