Estoy tratando de crear una función que permita a mi usuario personalizar todo el fondo de mi sitio. así que hice un formulario para cargar imágenes, pero no sé qué hacer a continuación con esta imagen que obtuve de un usuario. Dónde se almacenan esta imagen o imágenes y cómo acceder a esta imagen y hacer que estas imágenes sean una imagen de fondo. a continuación es mi html
<div class="crossfade"> <figure></figure> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div>y di animacion usando css
.crossfade figure { animation: imageAnimation 60s linear infinite 0s; backface-visibility: hidden; background-size: cover; background-position: center; color: transparent; height: 100%; width: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; z-index: -1; margin: 0; } .crossfade > figure:nth-child(1) { background-image: url(../img/0.jpeg); } .crossfade > figure:nth-child(2) { animation-delay: 12s; background-image: url(../img/1.jpeg); } .crossfade > figure:nth-child(3) { animation-delay: 24s; background-image: url(../img/2.jpeg); } .crossfade > figure:nth-child(4) { animation-delay: 36s; background-image: url(../img/0.jpeg); } .crossfade > figure:nth-child(5) { animation-delay: 48s; background-image: url(../img/1.jpeg); } @keyframes imageAnimation { 0% { animation-timing-function: ease-in; opacity: 0; } 8% { animation-timing-function: ease-out; opacity: 1; } 17% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } }y obtener la imagen del usuario por formulario
<form id="background-form" method="get"> <div> <label for="custom-file" class="form-label">Choose Images to upload(jpg, jpeg, or png) up to 5MB</label> <input required type="file" class="form-control" id="custom-file" accept=".jpg, .jpeg, .png" multiple/> </div> </form>Y archivo javascript para manejar el envío
const submit = document.querySelector("form#background-form") function handleSubmit() { //How should I access to the image I got from form //I tried to access by using URL.createObjectURL(file) API but didn't work //Or is there a way to store this image in localstorage or sessionstorage? //If it is possible how can I access to the image URL? }Hay una forma de almacenar su imagen usando el almacenamiento local y de sesión según sus necesidades y tenga en cuenta que el almacenamiento local tiene un límite de tamaño de 5 MB y el usuario puede aumentar el límite cuando sea necesario, sin embargo, solo unos pocos navegadores admiten esto pero en otros sesión de mano El tamaño de almacenamiento está limitado solo por la memoria del sistema.
Para guardar la imagen en localStorage, puede hacer lo siguiente.
const fileInput = document.querySelector('#fileInput');cuando se cambia la entrada: cuando se elige o cambia la imagen, esta función se ejecuta
fileInput.addEventListener('change', function () { const reader = new FileReader(); -- read content of filescuando se carga el contenido de los archivos
reader.addEventListener('load', function () {guardar el resultado (imagen) en el almacenamiento local
localStorage.setItem('image', reader.result) })leer contenido de blob o archivo
reader.readAsDataURL(this.files[0]); })