Discover image size that was inserted by input file

Question

Discover image size that was inserted by input file

Navigation

#1 by (3 votes)

3

I am creating a system to organize the images of a website, that is, I will store information such as name, extension, size, height, width, ... and I am having trouble picking up the height and width data

The codes are currently:

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'>

I found that writing% on% onload causes the image information to appear in the console, but typing console.log($('#img')); or $('#img').width(); returns the result to 0. Can anyone help me?

html jquery file-upload

asked by anonymous 08.09.2017 / 16:42

1 answer

How to use ViewModel in MVC 5 C # with Entity Framework? What is the difference between Varchar and Varchar2?

score 3 · Accepted Answer

After loading the image you can get these values through its properties, for example:

console.log($(img).prop('height'));
console.log($(img).prop('width'));

$('#teste').load(function(){
  	$("#height").html($(this).prop('height'));
    $("#width").html($(this).prop('width'));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="imagem">
  <img id="teste" src="http://www.google.hr/images/srpr/logo3w.png"/></div><divid="DadosDaImagem">
  <span id="height"></span>
  <span id="width"></span>
</div>