J'essaie d'utiliserpour 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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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); } }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; }