How to use an image from an uploaded file in HTML as a background?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

How to use an image from an uploaded file in HTML as a background?

P粉920199761 2023-09-08 13:49:16

353

I'm trying to use to allow the user to upload an image that will be used as a background. I don't know if I need to get the full path of the file.

This is the input I'm trying to use: This is the JavaScript associated with the input Background = selectBackground.value; document.body.style.background = "#4d3325 url('" background "') No repeating center center fixed"; document.body.style.backgroundSize = "Auto 100%";

The background doesn't change at all, when I try to display it as a regular image it just displays a small image icon.

P粉920199761

reply all(2)

P粉1342887942023-09-09 12:19:27 2 floor

Hi friends, please check if this solution meets your needs:

var input = document.getElementById('input');
input.addEventListener('change', readURL, true);

function readURL() {
  var file = document.getElementById("input").files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    var image = new Image();

    image.src = reader.result;

    image.onload = function() {
      document.getElementById("myDiv").style.backgroundImage = "url(" + reader.result + ")";
    }
  }
  if (file) {
    reader.readAsDataURL(file);
  }
}

Like +0

Add Reply

P粉8212313192023-09-09 09:38:53 1 floor

Use URL.createObjectURL()

By using this function, the uploaded image file will be converted into an object url.

Finally, when we change other images, we should use URL.revokeObjectURL() to remove the old url from memory for better memory management.

function file(e){
               window.url && URL.revokeObjectURL(window.url);// release memory
               const f = e.target.files[0];
               let url = URL.createObjectURL(f);
               window.url = url;
               document.getElementsByClassName('container')[0].style.backgroundImage = `url(${url})`;
}

.container{
        width: 100px;
        height: 100px;
        border: 1px solid lightgrey;
        margin: 10px;
        background-size: contain;
        background-repeat: no-repeat;
}

Like +0

Add Reply