Vorschau zuletzt hochgeladenen Bild

Question

Ich benutze ein altes Projekt, wo ich viele Bilder hochladen konnte, aber für dieses, ich brauche nur ein einziges. Wenn ich hochgeladen habe, sollte ich sehen, was hochgeladen wurde (Vorschau). Beim ersten Upload sehe ich das Bild. Wenn ich ein anderes Bild hochgeladen habe, sehe ich immer noch das erste Bild. Ich möchte das nicht, ich muss eine Vorschau des zuletzt hochgeladenen Bildes sehen.

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> 

ändern diese macht keinen Unterschied:

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

Answer 1

Erstellt <img>img hat .className nicht eingestellt auf <input type="file">.id. Beim zweiten change Ereignis existiert kein Element in document mit id unter jQuery() Anruf $('.'+id).

Die .className des Ersatzelements img auf id setzen.

$('.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

Sie die Filereader nicht brauchen ...

$('.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) 
})