Bagaimana untuk menggunakan imej daripada fail yang dimuat naik dalam HTML sebagai latar belakang?

Question

Saya cuba menggunakan untuk membolehkan pengguna memuat naik imej yang akan digunakan sebagai latar belakang. Saya tidak tahu sama ada saya perlu mendapatkan laluan penuh fail itu.

Ini adalah input yang saya cuba gunakan: Ini ialah JavaScript yang dikaitkan dengan input 背景 = selectBackground.value; document.body.style.background = "#4d3325 url('" + background + "')无重复中心中心固定"; document.body.style.backgroundSize = "自动 100%";

Latar belakang tidak berubah langsung, apabila saya cuba memaparkannya sebagai imej biasa ia hanya memaparkan ikon imej kecil.

Answer 1

Hai kawan-kawan, sila semak sama ada penyelesaian ini memenuhi keperluan anda:

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

Gunakan URL.createObjectURL()

Dengan menggunakan ciri ini, fail imej yang dimuat naik akan ditukar menjadi url objek.

Akhir sekali, apabila kita menukar imej lain, kita harus menggunakan URL.revokeObjectURL() untuk mengeluarkan url lama dari memori untuk pengurusan memori yang lebih baik.

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