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的{{1}}设置为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);
});

Answer 2

您不需要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)
})

预览上次上传的图片

2 个答案: