2

Tenho o seguinte script no qual uso um jquery para validar uma expressão regular que filtre os nomes dos arquivos para upload:

$(document).on('change', "input[type='file']", function() {
         var validaFile = $("input[type='file']").val();

        if (validaFile != '') {
            var regex = RegExp('^[a-zA-Z0-9-_.]+$');

            if (!regex.test(validaFile)) {
                $("input[type='file']").val('');
                alert("O nome deste arquivo é inválido. Por favor renomeie o arquivo.");
                return;
            } 
        }
    });

A questão é que o código funcionou co Firefox Developer, mas não funciona no chrome e Edge. Independente do arquivo que eu insira sempre dará nome de arquivo inválido.

8
  • O que esse regex deveria fazer? Commented 2/12/2015 às 17:07
  • Tenho um input no meu site para upload de arquivos. Esse regex não faz tratamento do tipo do arquivo, apenas do nome. Exemplo: se o usuario tentar inserir um arquivo com o nome Me,u!Arqu;ivo vai ser um arquivo de nome invalido e não podera ser anexado. Apenas serão anexados arquivo com caracteres az Az _ -.
    – Leonardo
    Commented 2/12/2015 às 17:12
  • Estranho.. eu testei aqui e funcionou. jsfiddle.net/yj78v/57 Commented 2/12/2015 às 17:14
  • Teste um arquivo Exemplo: Teste.txt e um T,es!te.txt ... Ira retornar a mesma mensagem
    – Leonardo
    Commented 2/12/2015 às 17:18
  • @PauloHDSousa o questionamento dele são os arquivos corretos que estão entrando no If.
    – Marconi
    Commented 2/12/2015 às 17:33

1 Resposta 1

3

O problema é que o Chrome adiciona C:\fakepath\ antes do nome do arquivo.

Uma solução que funciona em ambos navegadores é acessar diretamente a propriedade files do input:

$(document).on('change', "input[type='file']", function() {
  // acessa diretamente o objeto do input
  var validaFile = $(this)[0].files[0].name;

  if (validaFile != '') {
    var regex = new RegExp('^[a-zA-Z0-9-_.]+$');

    if (!regex.test(validaFile)) {
      $("input[type='file']").val('');
      $('#msg').html("O nome deste arquivo é inválido. Por favor renomeie o arquivo.");
      return;
    } else {
      $('#msg').html('O nome do arquivo é válido!');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />
<br /><span id="msg"></span>

Mais detalhes sobre a interface File.

2
  • 1
    +1 muito bom não sabia que era por causa disso.
    – Marconi
    Commented 2/12/2015 às 17:41
  • Correto cara, funcionou mesmo. Também não sabia disso, muito obrigado.
    – Leonardo
    Commented 2/12/2015 às 17:47

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 .