Using object URLs to display images

.block

license:none
height:400
scrolling:yes
border:yes

index.html

<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>
<script>
  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("ol");
      fileList.appendChild(list);
      for (var i = 0; i < files.length; i++) {
        var li = document.createElement("li");
        list.appendChild(li);

        var info = document.createElement("span");
        info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
        li.appendChild(info);

        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);
      }
    }
  }
</script>