搜索

首页  >  问答  >  正文

如何使用 HTML 中上传的文件中的图像作为背景?

我正在尝试使用 允许用户上传将用作背景的图像。我不知道是否需要获取文件的完整路径。

这是我尝试使用的输入: 这是与输入关联的 JavaScript 背景 = selectBackground.value; document.body.style.background = "#4d3325 url('" + background + "')无重复中心中心固定"; document.body.style.backgroundSize = "自动 100%";

背景根本没有改变,当我尝试将其显示为常规图像时,它只显示一个小图像图标。

P粉920199761P粉920199761448 天前531

全部回复(2)我来回复

  • P粉134288794

    P粉1342887942023-09-09 12:19:27

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

    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>

    回复
    0
  • P粉821231319

    P粉8212313192023-09-09 09:38:53

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

    回复
    0
  • 取消回复