Validate size, size and file type in Upload

Question

How do I validate the file size, the image dimensions (Size) and the file type that will be used in Upload, before Submit ?

To upload I use the function below in PHP, but the validation happens only after sending the form through the POST, what causes an upset to the user because of the refresh on the page.

         //****** 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';
        }     

Answer 1

Hello,

For this validation there is a new W3C feature that is supported by modern browsers, which is the File API. This resource can be used for this purpose.

Below is an example:

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>

Answer 2

Using the File API. In my example, you take WIDTH, HEIGHT, WEIGHT and FILE EXTENSION:

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>

Answer 3

For those who need it, below the code I used to validate the image

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