Neste artigo vamos mostrar como validar a extensão de um arquivo mediante Javascript. Temos um formulário com um campo file e quando se envia o arquivo, se realiza uma comprovação para ver se a extensão está entre as permitidas. Se estiver, se realiza o envio do formulário para fazer o upload do arquivo.

Neste script só se realiza a comprovação da extensão, em nenhum caso a recepção do arquivo e seu armazenamento no servidor, pois com Javascript não podemos realizar essas ações, já que é uma linguagem que se executa no cliente e não tem acesso ao servidor para fazer um upload.

Neste exemplo vamos definir um formulário com um campo file e um botão de enviar que chama a uma função que será encarregada de comprovar se a extensão está permitida e submeter o formulário se estiver tudo correto. O formulário seria o seguinte:

<form method=post action="#" enctype="multipart/form-data">
<input type=file name="arquivoupload">
<input type=button name="Submit" value="Enviar" onclick="comprova_extensao(this.form, this.form.arquivoupload.value)">
</form>

Agora veremos a função comprova_extensao() que recebe uma referência ao formulário e a rota do arquivo que desejamos subir desde dentro de nosso computador. A função realizará uma série de comprovações que veremos a seguir. O código será o seguinte:

function comprova_extensao(formulario, arquivo) {
   extensoes_permitidas = new Array(".gif", ".jpg", ".doc", ".pdf");
   meuerro = "";
   if (!arquivo) {
      //Se não tenho arquivo, é porque não se selecionou um arquivo no formulário.
       meuerro = "Não foi selecionado nenhum arquivo";
   }else{
      //recupero a extensão deste nome de arquivo
      extensao = (arquivo.substring(arquivo.lastIndexOf("."))).toLowerCase();
      //alert (extensao);
      //comprovo se a extensão está entre as permitidas
      permitida = false;
      for (var i = 0; i < extensoes_permitidas.length; i++) {
         if (extensoes_permitidas[i] == extensao) {
         permitida = true;
         break;
         }
      }
      if (!permitida) {
         meuerro = "Comprova a extensão dos arquivos a subir. \nSó se podem subir arquivos com extensões: " + extensoes_permitidas.join();
       }else{
          //submeto!
         alert ("Tudo correto. Vou submeter o formulário.");
         formulario.submit();
         return 1;
       }
   }
   //se estou aqui é porque não se pode submeter
   alert (meuerro);
   return 0;
}

O primeiro que fazemos é definir um array com as extensões permitidas para fazer o upload. Também definimos uma variável chamada meuerro, onde vamos salvar o texto explicativo do erro, se é que se produz.

Logo, comprovamos se recebemos uma rota do arquivo. Se não houver tal rota, se define o erro correspondente "Não foi selecionado nenhum arquivo". No caso contrário é que temos uma rota, com o qual vamos buscar o nome do arquivo.

A rota que podemos receber pode ter uma forma como esta:
C:\diretorio\outro diretorio\arquivo.doc

Da rota nos interessa obter só a extensão do arquivo. Por isso vamos obter a parte que há depois do último ponto. Isto se faz utilizando vários métodos dos objetos string de Javascript:

extensao = (arquivo.substring(arquivo.lastIndexOf("."))).toLowerCase();

Simplesmente estamos selecionando a parte do string que há depois do último ponto. E estamos passando a extensão a minúsculas, no caso em que esteja escrita com maiúsculas.

A seguir, para comprovar se esta extensão está entre as permitidas fazemos um loop for, que percorre todo o array de extensões permitidas e vai comparando-as à extensão que recortamos do nome do arquivo. No momento que encontra uma coincidência se sai do loop e põe a variável boleana permitida a true. Se não encontrasse coincidências essa variável boleana ficaria como false.

Logo, se comprova a variável boleana permitida. Se estiver em false é que não se permite a extensão, então defino o correspondente erro. Se estiver a true é que a extensão figurava entre as permitidas, então se envia o formulário e se sai da função.

Ao final da função se mostra o possível erro que tiver detectado. Só se mostrará o erro se não se chegou a mandar o formulário, porque se tivesse sido enviado, se sairia anteriormente da função.

Esperamos que esta validação tenha sido de utilidade. Pode-se ver em funcionamento em uma página a parte.