Restrições de Tipo de Arquivo em HTML: .xlsx, .xls, .csv
Resposta Rápida
Se carregar arquivos CSV é a sua tarefa, uma solução simples pode ser fornecida da seguinte forma:
<input type="file" accept=".csv, text/csv">Esse código configura o elemento de input para aceitar apenas arquivos CSV. A verificação é feita com base na extensão do arquivo (.csv) e no tipo MIME (text/csv).
Usando o Atributo Accept para Vários Tipos de Arquivo
Se o objetivo é criar um carregador de arquivos universal que precisa aceitar diferentes tipos de arquivos, você pode adicioná-los separando-os por vírgulas:
<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">Dessa forma, os arquivos .csv, .xlsx e .xls serão aceitos. Você pode pensar nisso como um receptor para documentos em formato de tabela; todos os outros arquivos serão ignorados.
Garantindo Compatibilidade entre Navegadores
No entanto, é importante notar que alguns navegadores menos comuns, como o Opera, podem não suportar o tipo MIME .csv. Mas esse problema pode ser facilmente resolvido usando tipos MIME alternativos:
<input type="file" accept=".csv, text/csv, application/csv, application/excel, application/vnd.ms-excel, application/vnd.msexcel, text/anytext">Validando Tipos de Arquivo com JavaScript
Deve-se antecipar que não se pode confiar totalmente no atributo accept. O JavaScript pode ser utilizado para um controle mais extenso sobre a validação do tipo de arquivo:
function checkFile(input) {
var validExts = ['.csv', '.xlsx', '.xls'];
if (validExts.indexOf(input.value.substr(input.value.lastIndexOf('.'))) == -1) {
alert(`Desculpe, apenas arquivos com as seguintes extensões são permitidos: ${validExts.toString()}.`);
return false;
}
return true;
}E se você aplicar o evento onchange para verificações instantâneas do tipo de arquivo durante o upload?
<input type="file" onchange="checkFile(this);">Simples assim!
Atenção a Navegadores Mais Antigos ou Menos Comuns
O atributo accept pode não funcionar corretamente em navegadores mais antigos ou menos comuns. Para evitar problemas, assegure-se de realizar testes minuciosos ou forneça aos usuários diretrizes detalhadas de uso.
Explorando o Atributo Accept
Melhorando a Experiência do Usuário
O atributo accept não apenas garante um funcionamento correto, mas também serve como uma ferramenta importante para melhorar a experiência do usuário (UX). Ele simplifica o processo de seleção de arquivos, reduz a probabilidade de erros e ajuda a economizar o tempo do usuário.
Definindo Prioridades
Cada aplicação tem requisitos específicos. Ao definir tipos de arquivos específicos, você ajuda os usuários a entenderem melhor o que é esperado deles.
Garantindo Compatibilidade entre Navegadores
Antes de utilizar plenamente o accept, teste sua compatibilidade entre navegadores. Isso ajudará a evitar surpresas indesejadas. Fontes valiosas de informação incluem MDN e Can I Use.
Visualização
O atributo accept pode ser visualizado como um filtro que permite apenas certos tipos MIME ou extensões de arquivo.
Accept: 📑 SOMENTE CSV
| Tipo de Arquivo | Aceito? |
| --------------- | ------- |
| 📑 CSV | ✅ Sim |
| 📄 PDF | ❌ Não |
| 📄 DOCX | ❌ Não |O gráfico acima ilustra como o atributo accept filtra arquivos no campo de entrada.
Recursos de Trabalho com Tipos de Arquivo
Upload de Imagens
Se você precisa fazer o upload de várias imagens, utilize:
<input type="file" accept="image/*">Simples e claro, sem passos extras!
Aceitando Apenas PDF
Se você precisa aceitar somente documentos PDF:
<input type="file" accept=".pdf">Quando você solicita um PDF, com certeza espera receber isso!
Cuidado com Dados Inseridos Incorretamente
É essencial lembrar que usuários experientes podem ignorar as configurações do atributo accept. Certifique-se de que você implementou a validação do tipo de arquivo no lado do servidor antes de processar esses arquivos.
Recursos Úteis
<input type="file">- HTML: Linguagem de Marcação de Hipertexto | MDN- HTML Input="file" Accept Attribute File Type (CSV) - Stack Overflow
- HTML input accept Attribute - W3Schools
- Padrão HTML - WHATWG
- RFC 7111 - Identificadores de Fragmentos URI para o tipo de mídia text/csv
- API de Arquivos - W3C
- Campos Content-Type em MIME - W3C