0

Como faço para validar o tamanho do arquivo, as dimensões da imagem (Size) e o tipo de arquivo que será utilizado no Upload, antes do submit ?

Para upload uso a função abaixo no PHP, mas a validação acontece somente depois do envio do formulário através do POST, o que causa um transtorno ao usuário por causa do refresh na pagina.

         //****** Enviando a imagem através de Upload *****//

        // colocando um nome aleatorio na imagem que será utilizada no upload
        $nomealeatorio = md5(uniqid(time())) . strrchr($_FILES['imagem']['name'], ".");

        // função para verificar se existe um diretorio padrão cadastrado (utilizado para fins de desenvolvimento); 
        diretorio();

        if(Empty($dir)){
          $upload['diretorio'] = $_SERVER['DOCUMENT_ROOT'].'/images/fotos/'.$nomealeatorio;
          // diretorio que será gravado no banco
          $upload['caminho'] = '/images/fotos/'.$nomealeatorio;
          }else{
          $upload['diretorio'] = $_SERVER['DOCUMENT_ROOT'].'/'.$dir.'/images/fotos/'.$nomealeatorio;
          // diretorio que será gravado no banco
          $upload['caminho'] = '/'.$dir.'/images/fotos/'.$nomealeatorio;
        }

        // tamanho do arquivo em bytes
        $upload['tamanho'] = 1024 * 1024 * 2; // 2mb

        // extensao do arquivo
        $upload['extensoes'] = array('jpg', 'png', 'jpeg');

        // salvando nome do arquivo na variavel 
        $img =  $_FILES['imagem']['tmp_name'];

        // obtendo a dimensao do arquivo  
        $upload['dimensao'] = getimagesize($img);

        // tratando os erros do Upload através do PHP
        $upload['erro'][0] = 'Não houve Erro';
        $upload['erro'][1] = 'O Arquivo é maior que o limite do Php, tente novamente com um arquivo menor ou contate o Administrador.';
        $upload['erro'][2] = 'O Arquivo é maior que o limite do Html, tente novamente com um arquivo menor ou contate o Administrador.';
        $upload['erro'][3] = 'Erro upload realizado parcialmente';
        $upload['erro'][4] = 'Upload não realizado, tente novamente ou contate o Administrador do Sistema';

        // verifica se houve erro no upload, se existir exibe a mensagem e aborta a operação;
        if ($_FILES['imagem']['error'] != 0) {
          die("Não foi possivel fazer o upload do arquivo, " . $upload['erro'][$_FILES['imagem']['error']]);
          exit;
        }

        // repassando o nome do arquivo para a variavel caminho
        $caminho = $_FILES['imagem']['name'];

        // dividindo uma string em strings 
        $separador = explode('.', $caminho);

        // transformando os valores em minusculo  
        $valida_extensao = strtolower(end($separador));


        // ****************************************************Verificando o tamanho da imagem **************************************************//
         if(($upload['dimensao'][0] < 250) or ($upload['dimensao'][1] < 250)) {
         echo('Não foi possivel fazer o upload do arquivo, para enviar um arquivo é necessário que ele seja imagem e que tenha mais de  250px de largura e 250px de altura, tente novamente ou contate o Administrador');
         exit;
         }  

        // ****************************************************Verificando a extensão***************************************************************//
        if (array_search($valida_extensao, $upload['extensoes']) === false) {
         echo'Atenção, Esse formato de arquivo não é permitido, envie arquivos do tipo, JPG, JPEG, PNG. O Upload não será realizado, Operação Abortada';
         exit;
        }

        // ****************************************************verificando o tamanho do arquivo**************************************************//
        if ($upload['tamanho'] < $_FILES['imagem']['size']) {
         echo'Atenção, O Arquivo enviado excede o limite de 2MB permitido, reduza o arquivo ou envie outro de até 2 Mb. O Upload não será realizado, Operação Abortada';
        }


        // ****************************************************Verificando se é possivel mover o arquivo****************************************//

        if(move_uploaded_file($_FILES['imagem']['tmp_name'], $upload['diretorio'])) {


      //******************************************************Realizando o Insert na Tabela ***************************************************//
              // Instanciando a Classe Responsável por Exibir Mensagens de Alerta para os usuários
              $msg = new Mensagem_alerta();

              // instancia a classe Fotos.
              $fotos = new Fotos();

              // repassa os parametros para o objeto
              $fotos->setTitulo($titulo);
              $fotos->setGooglemaps($googlemaps);
              $fotos->setTipo($tipo);
              $fotos->setTelefone($telefone_fixo);
              $fotos->setEmail($email);
              $fotos->setCaminho_foto($upload['caminho']);

              // iniciando o metodo de Inserir
              $objeto->FotosInsert($fotos);
                // mensagem de erro para o usuario
                echo" <div class='alert alert-success text-center' id='mensagem'role='alert'>";
                echo $msg->msgcadastrosucesso();    
                echo"</div>";

        }
          else {

          echo'Falha no Upload, se o problema Persistir, contate o Administrador';
        }     

3 Respostas 3

1

Usando a File API. No meu exemplo, você pega LARGURA, ALTURA, PESO e EXTENSÃO DO ARQUIVO:

var _URL = window.URL || window.webkitURL;
$("#imagem").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            $("#resultado").html("Width: "+this.width+"px<br>Height: "+this.height+"px<br>Peso: "+(file.size/1024).toFixed(2)+" KB"+"<br>Extensão: "+file.name.substring(file.name.lastIndexOf("."),file.name.length));
        };
        img.src = _URL.createObjectURL(file);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imagem" />
<br>
<div id="resultado">
</div>

4
  • muito obrigado! me ajudou no que precisava!
    – Diego Lela
    Commented 21/08/2017 às 18:57
  • como eu faria para rolar a tela até a div resultado? em alguns casos a mensagem está sendo exibida fora da visão do usuário
    – Diego Lela
    Commented 21/08/2017 às 22:49
  • @DiegoLela $(window).scrollTop($('#resultado').offset().top);
    – Sam
    Commented 21/08/2017 às 23:12
  • obrigado! funcionou! abraços!
    – Diego Lela
    Commented 21/08/2017 às 23:23
1

Olá,

Para esta validação existe um novo recurso da W3C que é suportado pelos navegadores modernos, que é o File API. Este recurso pode ser utilizado para este propósito.

Segue abaixo um exemplo:

function showFileSize(e) {
  var $input, file, $arquivo, $tamanho, $ext;
  
  $input = document.getElementById('arquivo');
  $nome_arquivo = document.getElementById("nome_arquivo");
  $tamanho = document.getElementById("tamanho");
  $ext = document.getElementById("ext");
  
  if (!window.FileReader) {
      $nome_arquivo.innerHTML = "A File API não é suportada pelo seu navegador.";
      return;
  }

  if (!$input) {
      $nome_arquivo.innerHTML = "Elemento input file não localizado!";
  }
  else if (!$input.files) {
      $nome_arquivo.innerHTML = "Este navegador não tem suporte a propriedade 'files' para inputs do tipo file.";
  }
  else if (!$input.files[0]) {
      $nome_arquivo.innerHTML = "Nenhum arquivo selecionado!";
  }
  else {
      file = $input.files[0];
      $nome_arquivo.innerHTML = file.name;
      $tamanho.innerHTML = file.size + " bytes";
      $ext.innerHTML = /\..*$/g.exec(file.name);
  }
  
  return false;
}
<form action="javascript:void(0);" onsubmit="showFileSize(this);">
  <p><input type="file" id="arquivo"></p>
  <p><button type="submit">Verificar Dados</button></p>
  <p>Arquivo: <span id="nome_arquivo"></span></p>
  <p>Tamanho: <span id="tamanho"></span></p>
  <p>Extensão: <span id="ext"></span></p>
</form>

1
  • muito obrigado! me ajudou no que precisava!
    – Diego Lela
    Commented 21/08/2017 às 18:57
0

Para quem precisar, abaixo o código que utilizei para validar a imagem

// obtendo o tamanho da imagem extensão do arquivo e size
var _URL = window.URL || window.webkitURL;


$("#imagem").change(function (e) {
    var extensoes, valido, file, img;
    extensoes = new Array('.jpg', '.png', '.bmp', '.jpeg');
    validar = true;
    if ((file = this.files[0])) {

        img = new Image();
        // recebendo o tipo de arquivo e armazenando na variavel
        var arquivo = (file.name.substring(file.name.lastIndexOf(".")).toLowerCase());

        img.onload = function () {
            // verificando o tamanho da imagem (largura e altura)
            if (this.width < 350 || this.height < 200){
                $("#resultado")
                .fadeIn()
                .addClass("alert")
                .addClass("alert-danger")               
                .fadeOut(10000)
                $(".alert-danger").text('Imagem com dimensões menor que o permitido! Para este Upload é necessário Imagens com Largura de: '+this.width+'px e Altura de: '+this.height+'px');
                document.getElementById("imagem").value = "";               
            }

            // validando os tipos de arquivo
            if (arquivo == ".jpeg" || arquivo == ".jpg" || arquivo == ".bmp" || arquivo == ".png"){
                validar = false;            
            }                       

            if (validar == true){
                $("#resultado")
                .fadeIn()
                .addClass("alert")
                .addClass("alert-danger")               
                .fadeOut(6000)
                $(".alert-danger").text('Imagem com Extensão diferente do permitido! Somente Imagens JPG, BMP e PNG são Permitidas!');
                document.getElementById("imagem").value = "";
            }       

        // verificando o tamanho do arquivo
            if (file.size > 2097152) {
                $("#resultado")
                .fadeIn()
                .addClass("alert")
                .addClass("alert-danger")               
                .fadeOut(10000)
                $(".alert-danger").text('Imagem com tamanho maior que o permitido! Só é Permitido Upload de imagens com tamanho até 2 MB!');
                document.getElementById("imagem").value = "";   

            }       



        };              

    }
    img.src = _URL.createObjectURL(file);

});
         <div class="panel panel-primary">
                <div class="panel-body">
                 <div class="col-xs-1 col-md-offset-3"> 
                      <label for="file">Imagem:</label>
                      <input type="file" name="imagem" id="imagem" required autofocus tabindex="6">
                  </div>

                </div> 
                <div id="resultado"></div>
              </div>      

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .