Comment utiliser une image d'un fichier téléchargé en HTML comme arrière-plan ?

Question

J'essaie d'utiliser pour permettre aux utilisateurs de télécharger une image qui sera utilisée comme arrière-plan. Je ne sais pas si j'ai besoin d'obtenir le chemin complet du fichier.

Voici l'entrée que j'essaie d'utiliser : Il s'agit du JavaScript associé à l'entrée 背景 = selectBackground.value; document.body.style.background = "#4d3325 url('" + background + "')无重复中心中心固定"; document.body.style.backgroundSize = "自动 100%";

L'arrière-plan ne change pas du tout, lorsque j'essaie de l'afficher sous forme d'image normale, il affiche simplement une petite icône d'image.

Answer 1

Salut les amis, merci de vérifier si cette solution répond à vos besoins :

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);
  }
}

<div id="myDiv" style="width:200px; height:200px">
  <input type="file" id="input" class="custom-file-input" accept=".png, .jpg, .jpeg, .gif .bmp" />
</div>

Answer 2

Utilisez URL.createObjectURL()

En utilisant cette fonctionnalité, le fichier image téléchargé sera converti en URL d'objet.

Enfin, lorsque nous modifions d'autres images, nous devrions utiliser URL.revokeObjectURL() pour supprimer l'ancienne URL de la mémoire pour une meilleure gestion de la mémoire.

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;
}

 <div class='container'></div>
 <input type='file' accept=".png, .jpg, .jpeg, .gif .bmp" onchange="file(event)">