Example: Using object URLs to display images

by Joshua Eckerman

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications -->

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
<div id="fileList">
  <p>No files selected!</p>
</div>

JavaScript

window.URL = window.URL || window.webkitURL;

var 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);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    var list = document.createElement("ul");
    fileList.appendChild(list);
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);

       
      var img = document.createElement("img"); 
      img.src = window.URL.createObjectURL(files[i]); 
      img.height = 60; 
      img.onload = function() {
        window.URL.revokeObjectURL(this.src); 
      } 
      li.appendChild(img); 
      var info = document.createElement("span"); 
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; 
      li.appendChild(info); 
    } 
  }
}