Estoy trabajando en un sitio rudimentario que permite a los usuarios cargar imágenes en el servidor y descargarlas de él. Quiero agregar una función de "vista previa" que permitirá al usuario ver su foto de antemano. Aquí está mi código:
<div class="container"> <input type="file" class="title3" id="picker"/> <img src= this.input alt="IDK why, but I can't display that." class="title3">;Puede usar JavaScript para actualizar dinámicamente la fuente de la imagen de la etiqueta img .
const img = document.getElementById('preview'); const input = document.getElementById('picker'); input.onchange = function(ev) { const file = ev.target.files[0]; // get the file const blobURL = URL.createObjectURL(file); img.src = blobURL; } <div class="container"> <input type="file" class="title3" id="picker" /> <img id="preview" alt="IDK why, but I can't display that." class="title3" width="200"> </div>Actualicé el código.
const selectFile = evt => { const [file] = evt.target.files; if (file) { document.getElementById('preview').src = URL.createObjectURL(file); } } <div class="container"> <input type="file" class="title3" id="picker" onchange="selectFile(event)" /> <img id="preview" alt="IDK why, but I can't display that." class="image">; </div>