Eu estou criando um sistema para organizar as imagens de um site, ou seja, vou armazenar informações como nome, extensão, tamanho, altura, largura, ... e estou com dificuldades para pegar os dados da altura e da largura
Os códigos atualmente são:
jQuery:
$(document).ready(function(){
$('#file').on('change',function(e){
var input = e.target;
var reader = new FileReader();
reader.onload = function(){
var dataURL = reader.result;
$('#img').prop('src',dataURL);
console.log($('#img'));
};
reader.readAsDataURL(input.files[0]);
var arquivo = input.files[0].name;
var split = arquivo.split('.');
var extensao = split[split.length-1];
var nome = arquivo.replace('.'+extensao,'');
var tamanho = (input.files[0].size/1024).toFixed(2);
var altura = 'ainda não descobri';
var largura = 'ainda não descobri';
$('#arquivo').html('Arquivo: '+arquivo);
$('#nome').html('Nome: '+nome);
$('#extensao').html('Extensão: '+extensao);
$('#tamanho').html('Tamanho: '+tamanho+' kB');
$('#altura').html('Altura: '+altura);
$('#largura').html('Largura: '+largura);
});
});
HTML:
<input id="file" type='file' accept='image/*'><br>
<br>
<p id="arquivo"></p>
<p id="nome"></p>
<p id="extensao"></p>
<p id="tamanho"></p>
<p id="altura"></p>
<p id="largura"></p>
<br>
<img id='img'>
Descobri que ao escrever console.log($('#img'));
no onload faz com que apareça no console as informações da imagem, mas ao digitar $('#img').width();
ou $('#img').height();
o resultado passa a ser 0. Alguém pode me ajudar?