Show Image

by Pranab Dey

HTML

Choose File: <input type="file" id="file">
<div class="show"></div>

CSS

.show {
  border: 1px solid red;
}

JavaScript

var file = document.querySelector("input[type=file]"),
  show = document.querySelector(".show");

file.onchange = function() {
  var input = file.files[0];
  var blb = new Blob();
  show.innerHTML = `Name: ${input.name}<br> Size: ${(input.size/1024).toFixed(2)}KB
  <br>Type: ${input.type}<br>Last Modified: ${new Date(input.lastModified).toLocaleDateString()}
  <br>Preview: <img src="${URL.createObjectURL(input)}" style='width: 200px; vertical-align: middle' /><br>
  Audio: <audio src="${URL.createObjectURL(input)}"></audio><br>
  Video: <video src="${URL.createObjectURL(input)}" controls></video>`;
  console.log(blb);
}