Estoy creando una aplicación de redes sociales. Recibí la entrada de imagen del usuario, pero estaba atascado al mostrar la imagen.
Aquí está mi archivo HTML
<form id="form"> <div id="closeForm"><i class="fas fa-window-close"></i></div> <label> <p>Enter the title:</p> <input id="newTitle" placeholder="Art Title" type="text"> </label> <label> <p>Select your image:</p> <input id="newImg" class="imgInput" accept="image/*" type="file"> </label> <input id = "formBtn" type="button" acc value="Upload"> </form>Este es mi archivo JS
document.getElementById('formBtn').onclick=()=>{ let newTitle = document.getElementById('newTitle').value; let newImg = document.getElementById('newImg').value; let fragment = ` <img class="art_img" src="${newImg}" alt="" srcset=""> <p id="title">${newTitle}</p>`; artContainer.innerHTML+=fragment; }Utilice el objeto FileReader para crear un blob y adjuntarlo al elemento.
Ejemplo:
const reader = new FileReader(); reader.onload = (e) => { imgElm.src = e.target.result; }; // do some checks to make sure its not empty reader.readAsDataURL(input.files[0]);