Quiero mostrar una imagen y un título cuando hago clic en el botón. Creé un formulario para hacerlo. Solo funciona para mostrar "Título". La imagen no se muestra. Aquí está mi código, por favor ayúdame.
function showImage() { document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value; document.getElementById('showImage').innerHTML=document.getElementById('imagP').value; } <!-- Input Area--> <input type="text" id="imgTitle"/> <input type="file" id="imagP"/> <button onclick="showImage()" >Show Image</button> <!-- Show Image & Title--> <p id="showTitle"></p> <img src="" id="showImage"> <!-- JavaScript Code-->Debe usar FileReader para leer el archivo cargado.
function showImage() { document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value; var preview = document.querySelector('#showImage'); var file = document.querySelector('#imagP').files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = ""; } } <input type="text" id="imgTitle"/> <input type="file" id="imagP"/> <button onclick="showImage()" >Show Image</button> <!-- Show Image & Title--> <p id="showTitle"></p> <img src="" id="showImage">aquí usamos la función fileChange cada vez que cambia el archivo. y agregue el estilo de mostrar ninguno a la etiqueta img donde queremos mostrar la imagen, para que podamos mostrar/ocultar la imagen al hacer clic en el botón Show Image .
let file = null; function showImage() { document.getElementById('showTitle').innerHTML = document.getElementById('imgTitle').value; const showImage = document?.getElementById('showImage'); showImage.style?.display = 'block'; showImage.src = window?.URL?.createObjectURL(file); } const fileChange = (fileObj) => { document.getElementById('showTitle').innerHTML = ''; const showImage = document.getElementById('showImage'); showImage.style.display = 'none'; file = fileObj.target.files[0] } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #editable { width: 400px; height: 100px; border: 1px solid black; } </style> </head> <body> <input type="text" id="imgTitle" /> <input type="file" id="imagP" onchange="fileChange(event)" /> <button onclick="showImage()">Show Image</button> <!-- Show Image & Title--> <p id="showTitle"></p> <img src="" id="showImage" style="display:none"> </body> </html>La forma más sencilla de lograrlo de la siguiente manera
function showImage() { document.getElementById('showTitle').innerHTML=document.getElementById('imgTitle').value; if(document.getElementById('imagP').files[0] != null) { document.getElementById('showImage').src=URL.createObjectURL(document.getElementById('imagP').files[0]); } else { alert("please select the image") } } <input type="text" id="imgTitle"/> <input type="file" id="imagP"/> <button onclick="showImage()" >Show Image</button> <!-- Show Image & Title--> <p id="showTitle"></p> <img src="" id="showImage">