Javascript改变id元素的背景

Javascript to change background of element with id

本文关键字：背景 元素 id 改变 Javascript      更新时间：2023-09-26

我有一个文件上传元素:

<input type="file" name='image1' id='image1'>

然后我有一个按钮:

<button onclick="addphotos()">Add photos</button>

addphotos()函数是:

function addphotos() {
  var file1 = document.getElementById('image1').files[0];
  var img1=file1.name.split(/(''|'/)/g).pop();
  var pic1 = "url(" + file1 + ")";
  document.getElementById("right").style.backgroundImage=pic1;
}

据我所知，最后一行的语法应该是正确的，但我认为我遗漏了一些东西。最后一行语法参考- http://www.w3schools.com/cssref/tryit.asp?filename=trycss_js_background-image

编辑:它不起作用。立方体的正面没有图像

document.addEventListener('DOMContentLoaded', function() {
  var input = document.getElementById('input');
  var container = document.getElementById('image-block');
  
  function onFilePicked(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    
    reader.onload = function(event) {
      var image = event.target.result;
     
      container.style.backgroundImage = 'url(' + image + ')';
    };
    reader.readAsDataURL(file);
  }
  
  input.addEventListener('change', onFilePicked);
});
#image-block {
  width: 100px;
  height: 100px;
}
<input type="file" id="input">
<div id="image-block"></div>

相关文章：