4

Tenho um código que verifica o tamanho antes de enviar o arquivo, gostaria de saber como faço para verificar a extensão do arquivo junto, por exemplo, preciso dessas extensões .jpg, png, .gif, .pdf, .txt, .doc, .docx. Teria como eu fazer no mesmo código? Como eu faria isso?

Código

$j(function () {
  $j("#arquivo").change(function () {//ou Id do input 
    var fileInput = $j(this);
    var maxSize = $j(this).data('max-size');
    console.log(fileInput.get(0).files[0].size);

    //aqui a sua função normal
    if (fileInput.get(0).files.length) {
      var fileSize = fileInput.get(0).files[0].size; // in bytes
      if (fileSize > maxSize) {
        $j('#resultado').text('Arquivo excedeu o limite permitido, por favor escolha arquivos com no maximo 2GB*');
        $j('#validate').attr('disabled', 'disabled');
      } else {
        $j('#validate').removeAttr('disabled');
        $j('#resultado').hide();
      }
    }
  });
});

3 Respostas 3

5

É possível sim, pois o atributo value do input retorna o nome do arquivo:

$j(function () {
    $j("#arquivo").change(function () {//ou Id do input 
        var fileInput = $j(this);
        var maxSize = $j(this).data('max-size');
        var extPermitidas = ['jpg', 'png', 'gif', 'pdf', 'txt', 'doc', 'docx'];
        console.log(fileInput.get(0).files[0].size);

        //aqui a sua função normal
        if (fileInput.get(0).files.length) {
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if (fileSize > maxSize) {
                $j('#resultado').text('Arquivo excedeu o limite permitido, por favor escolha arquivos com no maximo 2GB*');
                $j('#validate').attr('disabled', 'disabled');
            } else if(typeof extPermitidas.find(function(ext){ return fileInput.val().split('.').pop() == ext; }) == 'undefined') {
                $j('#resultado').text('Extensão inválida');
                $j('#validate').attr('disabled', 'disabled');
            } else {
                $j('#validate').removeAttr('disabled');
                $j('#resultado').hide();
            }
        }
    });
});

Segue o exemplo em ação:

function verificaExtensao($input) {
  var extPermitidas = ['jpg', 'png', 'gif', 'pdf', 'txt', 'doc', 'docx'];
  var extArquivo = $input.value.split('.').pop();

  if(typeof extPermitidas.find(function(ext){ return extArquivo == ext; }) == 'undefined') {
    alert('Extensão "' + extArquivo + '" não permitida!');
  } else {
    alert('Ok!');
  }
}
<input type="file" onchange="verificaExtensao(this)">

8
  • Eu tentei esse, mas ele da erro pra qualquer extensão. Ele exibe a mensagem mesmo se a extensão é png, jpg, etc.. Commented 25/08/2017 às 16:13
  • @GustavoSouza Desculpe Gustavo, havia uma falha no if, teste agora por favor Commented 25/08/2017 às 16:51
  • Ainda não está funcionando, se quiser fazer um teste ai pra ver Commented 25/08/2017 às 16:55
  • Ajustei o nome da sua variável dentro da função e isolei o texte, resposta atualizada ;) Commented 25/08/2017 às 17:02
  • Não consegui fazer mesclando os 2 em 1 só, mas eu usei o seu exemplo separadamente e faz o que preciso, seria bom se as duas trabalhassem em conjunto, mas está funcional, obrigado. Commented 25/08/2017 às 17:12
1

Pode usar uma regex para validar se o arquivo contém determinada extensão.

Exemplo

let validos = /(\.jpg|\.png|\.gif|\.pdf|\.txt|\.doc|\.docx)$/i;

$("#arquivo").change(function() {

  let fileInput = $(this);
  let nome = fileInput.get(0).files["0"].name;
  if (validos.test(nome)) {
    console.log("Válido")
  } else {
    console.log("Inválido")
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="arquivo">

0
var extensao = $(this).val().split("\\").pop().substring($(this).val().split("\\").pop().lastIndexOf('.')+1, $(this).val().split("\\").pop().length) || $(this).val().split("\\").pop();

Utilize este código após a verificação de tamanho, ou, em conjunto com ela. Basicamente o código está pegando o patch do arquivo que está no input e, extraindo sua extensão, com isso, você pode fazer algumas condicionais e apenas aceitar as extensões que você quer.

Cuidado ao utilizar este tipo de validação com javascript, ela pode ser facilmente burlada, então, sempre utilize-a em conjunto com uma verificação back-end.

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 .