Image dimension

by fishbullet

HTML

<input id="image" name="img" type="file" />
<br/>
<img src="#" alt="This image is going to load" id="image_on_load" />
<p id='image_info_width'>
</p>
<p id='image_info_heigth'>
</p>

JavaScript

$('#image').on('change', function(evt) {
  var img = document.getElementById('image_on_load');
  var reader = new FileReader();
  reader.onloadend = function() {
    $('#image_on_load').prop('src', reader.result)
  }
  reader.readAsDataURL(this.files[0]);

  img.onload = function(image) {

    $('#image_info_width').text('Width: ' + image.target.width)
    $('#image_info_heigth').text('Height: ' + image.target.height)

  }
});