0
349
ViewsObtener la imagen del archivo de entrada y luego agregarla como fondo a un div
Estoy haciendo un juego de golpear al topo con Vanilla JS y estoy tratando de hacer que la persona golpee lo que quiera permitiéndole cargar una imagen por archivo de entrada, pero incluso después de días de buscar cualquier tipo de solución, no tuve suerte.
HTML:
<input type='file' id='getval' name="background-image" /> <div class="game"> <div class="hole hole1"> <img class="mole"> </div> <div class="hole hole2"> <img class="mole"> </div> </div>Javascript vainilla:
document.getElementById('getval').addEventListener('change', readURL); function readURL() { let file = document.getElementById("getval").files[0]; document.getElementsByClassName('mole')[0].setAttribute("style", "background-image: url(" + file + ")"); }CSS:
.mole { background-image: url(''); }El juego funciona bien pero no aparece la imagen subida:
Si alguien pudiera ayudarme con esto, sería más que bienvenido.
Este proyecto es parte de #javascript30. Los recreo y cambio partes para practicar Vanilla JS, pero he estado atascado durante días con este.
·
Juan Pablo Isaza
1 answers
Answer question0
Puedes usar algo como esto.
https://www.w3docs.com/learn-javascript/file-and-filereader.html
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
const fileInput = document.getElementById('imageInput'); const images = document.querySelectorAll('.mole'); fileInput.addEventListener('change', (e) =>{ const file = e.target.files[0]; let fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = function (){ images[0].setAttribute('src', fileReader.result); // images[0].setAttribute('style', `background-image: url('${fileReader.result}')`); } }) body { min-height: 100vh; margin: 0; background-color: bisque; display: grid; place-content: center; } .box{ display: flex; flex-direction: column; place-content: center; align-items: center; } input{ margin-bottom: 1rem; } .images{ display: flex; flex-direction: row; } .mole { width: 10rem; height: 10rem; margin-bottom: 1rem; } <div class="box"> <input type="file" id="imageInput" /> <div class="images"> <img class="mole" /> <img class="mole" /> </div> </div>
·
Juan Pablo Isaza
Report
Answer question