How can I update my backgroud image url by the image I got from random client-CodePudding

I'm trying to make a function which allows my user to customize the whole background of my site. so I made a form for image upload but I don't know what to do next to do with this image I got from a user. Where this image or images are stored and how to access to this image and make this images as a background image. below is my html

<div >
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

and I gave animation using 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;
  }
}

and get image from user by form

<form id="background-form" method="get">
  <div>
    <label for="custom-file" >Choose Images to upload(jpg, jpeg, or png) up to 5MB</label>
      <input
        required
        type="file"
        
        id="custom-file"
        accept=".jpg, .jpeg, .png"
        multiple/>
  </div>
</form>

And javascript file to handle submit

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? 

}

CodePudding user response：

There is way to store your image using local and session storage based on your needs and take in count, that localStorage have size limit of 5mb and limit can be increased by the user when needed, however, only a few browsers support this but on other hand sessionStorage size is limited only by system memory.

To save image in localStorage you can do following.

const fileInput = document.querySelector('#fileInput');

when input is changed - when image is chosen or changed this function executes

fileInput.addEventListener('change', function () {
    const reader = new FileReader(); -- read content of files

when content of files is loaded

    reader.addEventListener('load', function () {

save result ( image ) in local storage

        localStorage.setItem('image', reader.result)
    })

read content of blob or file

    reader.readAsDataURL(this.files[0]);
})