<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" id="preview">
<p>Select an image to preview it:</p>
<input type="file" accept="image/*" />
<p class="dimensions"></p>
body { background: #1a2728; color: #a3aa8c; }
img { max-height: 100px; max-width: 100px; margin: 0 5px; float: left; }
var fileInput = document.querySelector('input[type="file"]');
var preview = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
    preview.onload = function() {
        var dims = this.naturalWidth + 'x' + this.naturalHeight;
        document.querySelector('.dimensions').innerHTML = 'Dimensions: ' + dims;
      
        window.URL.revokeObjectURL(this.src);
    };
  
  
    var url = URL.createObjectURL(e.target.files[0]);
    preview.setAttribute('src', url);
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.