如何使用 HTML 中上傳的文件中的圖像作為背景?
P粉920199761
P粉920199761 2023-09-08 13:49:16
0
2
527

我正在嘗試使用 允許用戶上傳將用作背景的圖像。我不知道是否需要獲取文件的完整路徑。

這是我嘗試使用的輸入: 這是與輸入關聯的 JavaScript 背景= selectBackground.value; document.body.style.background = "#4d3325 url('" background "')無重複中心中心固定"; document.body.style.backgroundSize = "自動100%";

背景根本沒有改變,當我嘗試將其顯示為常規圖像時,它只顯示一個小圖像圖示。

P粉920199761
P粉920199761

全部回覆(2)
P粉134288794

嗨朋友,請檢查此解決方案是否滿足您的需求:

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>
P粉821231319

使用 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)">
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板