1

Eu tenho um input file no qual eu limitei para que só aceite arquivo cujo o formato seja um arquivo de texto, com extensão .txt.

Usei o atributo accept para isso, veja:

accept=".txt"

Entretanto, eu gostaria de saber se é possível verificar usando jQuery, o formato e o tipo do arquivo no caso do atributo accept falhar?


Mcve

Exemplo de ilustração:

function verificarArquivoTexto(arq)
{

}

$(
	function ()
  {
  	$('input:file').change(
    	function(e)
      {
      	var arq = $(this).val().split('\\').pop();
        $('.arquivo').html(arq);
      }
    );
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="upload" type="file" name="file-upload" accept=".txt">
<div class="arquivo">

</div>

1
  • 1
    Eu deixaria de lado verificar mimetype front-end e focaria mais na extensão do arquivo e no peso. Mesmo que fosse tentado enviar um arquivo .txt que não seja .txt, pode fazer essa verificação no servidor. O front-end tem mais a função de evitar requisições desnecessárias ao servidor, mas pode ser alterado e uma % muito baixa de clientes vai perder tempo com isso.
    – Meu ovo
    26/01/2018 às 3:37

2 Respostas 2

3

Sim, é possível. Basta capturar os valores do atributo input.files, ele vai te retornar um array de File e depois é só verificar.

const inputUpload = document.querySelector("#upload");

inputUpload.addEventListener("change", () => {
  
  for (let i = 0; i < inputUpload.files.length; i++) {
    if ( 
      inputUpload.files[i].name.match(/\.txt$/) && //Verifica se o nome do arquivo termina com .txt
      inputUpload.files[i].type == "text/plain" //Verifica o mimetype do arquivo
    ) {
      console.log( inputUpload.files[i].name + " é um txt" );
    } else {
      console.log( inputUpload.files[i].name +  "não é um txt" );
    }
  }
});
<input id="upload" type="file" name="file-upload" multiple >

3
  • Selecionei um arquivo .mp4 com extensão .txt e validou como .txt.
    – Meu ovo
    25/01/2018 às 21:16
  • @dvd Conforme a documentação, isso acontece pois o Js não ler o bytestream do arquivo. Ele pega esse mimetype através da extensão do arquivo. (Algo semelhante ao métodoMimeTypeMap.getMimeTypeFromExtension do Android. Para uma precisão maior é necessário utilizar o back-end. 25/01/2018 às 22:27
  • Só um adendo: Ele pode até utilizar a API FileReader para ler o conteúdo do arquivo via JS, mas não sei se vale a pena. Principalmente para grandes arquivos. 25/01/2018 às 22:34
2

Não necessariamente com jQuery, mas sim com a API File nativa do JavaScript, assim por exemplo:

$('input:file').change(function (e) {
    console.log("Tipo:", this.files[0].type);
});

Se for upload de multiplos arquivos

$('input:file').change(function (e) {
    for (var i = 0, j = files.length; i < j; i++) {
        console.log("Tipo:", this.files[i].type);
    }
});

Exemplo:

    $('input:file').change(function (e) {
        console.log("Campo: ", this.name);
        console.log("Tipo: ", this.files[0].type);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="arquivo1">
<input type="file" name="arquivo2">

8
  • Selecionei um arquivo .mp4 com extensão .txt e validou como .txt.
    – Meu ovo
    25/01/2018 às 21:19
  • @dvd pra resolver isto só checando no back-end com php ou outra linguagem através do "MAGIC" (se o sistema operacional tiver suporte para o MAGIC), no geral o problema é implementação dos navegadores que é assim mesmo, funciona por "dedução". 25/01/2018 às 21:25
  • 1
    @JeffersonQuesado ele pode sim ler o conteúdo do arquivo, basta utilizar a API FileReader, mas a questão é se é viável, principalmente com "arquivos grandes". 25/01/2018 às 22:35
  • 1
    @gato sim, o jQuery exclusivamente usa o .apply para mudar o contexto das funções e eventos proprios, fazendo ser possivel se referir ao elemento DOM especifico, ou seja this irá equivaler ao <input> que disparou o change ;) 26/01/2018 às 0:53
  • 2
    @JeffersonQuesado é bem complexo, não só pelo consumo mas pela possibilidade de criar um MAGIC proprio para uma aplicação front-end, é possivel mas não existe nada pronto e eu teria que fazer tudo do zero, talvez no futuro eu crie algo no github e compartilhe. Adicionei um exemplo na resposta com jQuery para entender. 26/01/2018 às 0:54

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 .