Wie verwende ich ein Bild aus einer hochgeladenen Datei in HTML als Hintergrund?

Question

Ich versuche, zu verwenden, um Benutzern das Hochladen eines Bildes zu ermöglichen, das als Hintergrund verwendet wird. Ich weiß nicht, ob ich den vollständigen Pfad der Datei benötigen muss.

Dies ist die Eingabe, die ich verwenden möchte: Dies ist das mit der Eingabe verknüpfte JavaScript 背景 = selectBackground.value; document.body.style.background = "#4d3325 url('" + background + "')无重复中心中心固定"; document.body.style.backgroundSize = "自动 100%";

Der Hintergrund ändert sich überhaupt nicht. Wenn ich versuche, ihn als normales Bild anzuzeigen, wird nur ein kleines Bildsymbol angezeigt.

Answer 1

嗨朋友，请检查此解决方案是否满足您的需求：

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

使用 URL.createObjectURL()

通过使用此功能，上传的图像文件将转换为对象 url。

最后，当我们更改其他图像时，我们应该使用 URL.revokeObjectURL() 从内存中删除旧的 url，以便更好地管理内存。

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)">