21.02.2025

Restrições de Tipo de Arquivo em HTML

Resposta Rápida

Para limitar os tipos de arquivos no elemento <input>, utilize o atributo accept, especificando as extensões necessárias:

<input type="file" accept=".jpg,.png">

Essa configuração permitirá que os usuários selecionem apenas arquivos com as extensões .jpg e .png, tornando o uso do formulário mais conveniente e reduzindo as chances de erros durante o upload.

Análise Detalhada das Restrições de Tipo de Arquivo

Considerações para o Atributo Accept

A funcionalidade do atributo accept pode variar dependendo do navegador. Por exemplo, o Internet Explorer passou a suportá-lo apenas a partir da versão 9. Sempre verifique a compatibilidade com os navegadores que seu público-alvo utiliza.

Validação do Lado do Cliente Usando JavaScript

Para um controle mais detalhado, você pode usar validação do lado do cliente com JavaScript:

document.getElementById("meuInputArquivo").addEventListener('change', function(event) {
  var extensoesValidas = ['jpg', 'png', 'gif']; // Extensões de arquivo permitidas
  var nomeArquivo = event.target.files[0].name;
  var extensaoArquivo = nomeArquivo.split('.').pop().toLowerCase();
  if(extensoesValidas.indexOf(extensaoArquivo) < 0) {
    alert("O formato de arquivo selecionado não é permitido!");
    this.value = ''; // Limpar o campo de input
  }
});

Validação Adicional no Lado do Servidor

Você não deve depender apenas da validação do lado do cliente—sempre verifique o tamanho e o tipo do arquivo no servidor. Isso protegerá sua aplicação de arquivos maliciosos e garantirá um alto nível de segurança.

Visualização

Pense no elemento <input type="file"> como um porteiro que determina quais arquivos podem ser enviados:

Permitidos: [.jpg, .png, .gif]

O atributo accept dita quais arquivos serão permitidos:

<!-- O porteiro faz cumprir as regras -->
<input type="file" accept=".jpg,.png,.gif">

Agora, apenas arquivos apropriados irão participar da "festa" de upload:

Antes: [📄, 🖼️.jpg, 🎵.mp3, 🌠.gif, 📊.xls, 🖌️.png]
Depois: [             🖼️.jpg,          🌠.gif,          🖌️.png]

Apenas arquivos com extensões aprovadas terão acesso VIP à "festa" de upload! 🎉

Compatibilidade entre Navegadores e Alternativas

Comportamento Diferente entre os Navegadores

Os navegadores podem interpretar o atributo accept de forma diferente: o comportamento no Chrome e Firefox pode diferir do Safari ou de versões desatualizadas do Internet Explorer. Preste atenção aos testes de compatibilidade.

Métodos Alternativos para Navegadores Incompatíveis

Para navegadores que não suportam o atributo accept ou se o JavaScript estiver desativado, considere soluções alternativas baseadas em Flash ou Java. Uma opção ideal é fornecer uma experiência do usuário que degrade de forma progressiva, permitindo que usuários com hardware mais antigo enviem arquivos.

Sincronização Cliente-Servidor

Melhorando a Experiência do Usuário com XMLHttpRequest

Aprimore a experiência do usuário usando XMLHttpRequest ou Fetch API para uploads de arquivos assíncronos. Essas tecnologias permitem que você acompanhe o progresso e informe os usuários sobre o processo de upload:

var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'endpoint_de_upload'); 
xhr.upload.onprogress = function(event) { 
  if (event.lengthComputable) { 
    var porcentagemCompleta = (event.loaded / event.total) * 100; 
    console.log('Progresso do upload: ' + porcentagemCompleta + '%');
  } 
}; 
xhr.onload = function() { 
  if (xhr.status == 200) { 
    console.log('Upload concluído com sucesso: ' + xhr.responseText); 
  } else { 
    console.log('Erro no upload: ' + xhr.statusText); 
  } 
}; 
xhr.send(new FormData(document.getElementById('formUpload'))); 

Fortalecendo a Segurança do Lado do Servidor

Não se esqueça da possibilidade de receber arquivos de tipos incorretos. Sempre verifique e confirme o nome e a extensão dos arquivos no servidor para fornecer proteção adicional.

Recursos Úteis

1. O atributo accept do elemento de entrada HTML - Um guia sobre o atributo accept.
2. <input type="file"> - HTML | MDN - Documentação do MDN sobre <input type="file">.
3. Atributo accept de entrada de arquivo - Stack Overflow - Discussão sobre a utilidade do atributo accept.
4. Usando arquivos de aplicativos web - Web APIs | MDN - Guia sobre como trabalhar com arquivos em aplicativos web usando a API de Arquivos.
5. Validação de extensão de arquivo antes do upload - Stack Overflow - Métodos para verificar tipos de arquivo no cliente usando JavaScript.
6. Uploads simples de arquivos com JavaScript | FilePond - Documentação da biblioteca FilePond, incluindo como definir tipos de arquivos aceitos.
7. Can I use... Tabelas de suporte para HTML5, CSS3, etc. - Tabelas de suporte de navegador para o atributo accept.

Video

Navigation