image upload to Div

background image upload. pure JS

by trentHarlem

HTML

<div id='input-container'>
  <input type="file" id="fileElem" multiple accept="image/*">
  <a href="#" id="fileSelect"></a>
  <div id="fileList"></div>
</div>

<div id="image-container"></div><br>
<div id="image-container2"></div>

CSS

#image-container {
  height: 400px;
  width: 400px;
  background-size: 150%;
}

JavaScript

const fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem"),
  fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function(e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

fileElem.addEventListener("change", handleFiles, false);

function handleFiles() {
  if (!this.files.length) {} else {
    const list = document.createElement("ul");
    fileList.appendChild(list);
    for (let i = 0; i < this.files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);
      const imgContainer = document.getElementById("image-container")
      const imgContainer2 = document.getElementById("image-container2")
      const img = document.createElement("img");
      img.src = URL.createObjectURL(this.files[i]);

      // for CSS Background-image
      imgContainer.style.backgroundImage = `url("${img.src}")`;
      
      // for HTML src
      imgContainer2.innerHTML = `<img width='400px' height='auto' src='${img.src}'/>`;

      // hide input after file selected
      fileElem.addEventListener("click", hide());

      function hide() {
        document.getElementById('input-container').style.display = 'none';
      }

    }
  }
}