Pegar tamanho de imagem input file com javascript/jquery

[mvspereiraz 1]

Meu povo eu tenho um input file.. e queria que ao selecionar a imagem ele me mostrasse o tamanho.. altura e largura da imagem.. é possivel isso??

[angelorubin 142]

Olá,

 

Html

<img src="imagem.jpg" id="imagem" alt="Imagem" />

Javascript

var largura = document.getElementById("imagem").width; // retorna a largura
var altura = document.getElementById("imagem").height; // retorna a altura

jQuery

var largura = $('#imagem').width(); // retorna a largura
var altura = $('#imagem').height(); // retorna a altura

[mvspereiraz 1]

Então amigo como havia dito preciso pegar o tamanho da imagem q foi selecionado no input file antes do upload..

[angelorubin 142]

Olá,

 

A primeira pergunta que me vem a mente é: será que colocarão apenas imagens neste input file?

 

Provavelmente não, então talvez você precise tratar disso antes de realmente manipular o arquivo de imagem.

 

Eu faria assim com jQuery:

$(function(){
    // Função validar extensões arquivos de imagem
    function validaExtensao(id){
        // Monto um array com as extensões permitidas
        var extensoes = new Array('bmp','jpg','png');
        // Pego a extensão do arquivo colocado no input tipo file
        var ext = $('#'+id).val().split(".")[1].toLowerCase();
        // Faço um loop para verificar se  extensao é permitida
        if($.inArray(ext, extensoes) == -1){
            alert("Arquivo não permitido: "+ext);
            $('#'+id).val("").empty();
        }
    }
    $('#idMeuElemento').on('change', function(){
        validaExtensao('idMeuElemento');
    })
})

Html

<input type="file" id="idMeuElemento" />

Ai é só juntar com o que lhe passei antes.

 

Espero que ajude.

[mvspereiraz 1]

Amigo a forma de validação da extensão é show confesso q não tinha pensado nisso mas para validar o tamanho da imagem não ta dando certo.. ele ta me retornando o tamanho do input e não da imagem..