Как проверить размеры загружаемого файла(изображения)?

Question

[Дмитрий]

Здравствуйте, есть поле для загрузки файла с предпросмотром. При загрузке файла хочу проверить альбомное или портретное изображение. Но всегда получаю ширину 50 и высоту 0.

Link to codepen.io
Как проверить?
Спасибо.

Answer 1

[AngReload]

Изображение уже скачано, но ваш код выполняется раньше чем браузер успевает поменять размер картинки. Оберните код функции в setTimeout с небольшой задержкой и всё заработает, хотя может лучше было бы ловить изменение размеров.

код

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      
      var $img = $('<img id="blah">');
      $img.attr('src', e.target.result);
      setTimeout(function() {
      $('.form-group>label').find('img').remove();
      $img.appendTo('.form-group>label');
      $img = $(document).find('#blah');
        console.log($img.width(), $img.height());
      if ( $img.width() >= $img.height() ) {
          $img.css({
            'width': '100%',
            'height': 'auto',
          });
      } else {
        $img.css({
            'width': 'auto',
            'height': '100%',
          });
      }
      }, 100);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});