21.02.2025

Limitações de Seleção de Arquivos em HTML: O Atributo 'multiple'

Resposta Rápida

Para definir um limite no número de arquivos (vamos dizer até três) que podem ser selecionados múltiplas vezes, você precisa usar JavaScript. Rastree o evento change no elemento de entrada, conte o número de arquivos selecionados e, se ultrapassar o limite definido, limpe o formulário.

// Defina o limite no número de arquivos
const maxFiles = 3;

// Acompanhe as mudanças no formulário de entrada
document.querySelector('#multiFile').addEventListener('change', function() {
  // Se mais arquivos forem selecionados do que o limite definido, limpe o formulário e mostre uma mensagem
  if (this.files.length > maxFiles) {
    this.value = '';
    alert(`Você excedeu o limite de seleção de arquivos: pode selecionar no máximo ${maxFiles} arquivos.`);
  }
});

<input type="file" id="multiFile" multiple>

Melhorando a Interação do Usuário

Para tornar a interface mais amigável, é sugerido desabilitar o botão de envio do formulário se o número de arquivos selecionados exceder o limite definido. Isso pode ser feito alterando a propriedade do botão usando jQuery.

// Monitore as mudanças no formulário de input de arquivos
$('#multiFile').on('change', function() {
  let fileCount = this.files.length;
  // A atividade do botão depende do número de arquivos selecionados
  $('#uploadBtn').prop('disabled', fileCount > maxFiles);

  if (fileCount > maxFiles) {
    this.value = '';
    alert(`Arquivos selecionados em excesso. Contagem permitida: ${maxFiles}.`);
  }
});

<input type="file" id="multiFile" multiple>
<button id="uploadBtn">Enviar</button>

Não esqueça da importância da validação no lado do servidor para proteger contra a violação das restrições no lado do cliente.

Visualização

Imagine um cenário onde estamos em uma loja de doces, e é importante seguir o limite na quantidade de doces:

Você (🤲): "Quero levar todos os doces!"
Regras da Loja (📜): "Espere, você pode levar apenas 3!"

Da mesma forma, lidamos com a seleção de arquivos:

<input type="file" multiple onchange="if(this.files.length > 3) { alert('Muitos arquivos! É permitido no máximo 3.'); this.value='';}">

Metáfora Visual:

Antes: 🍬🍭🍫🍬🍭🍫🍬🍭🍫 – (Vou pegar doces até explodir!)
Depois: 🍬🍭🍫 – (Três doces são suficientes)

Esse tipo de restrição pode ser configurado diretamente no código HTML.

Configurações Avançadas

Vamos avançar para melhorar a seleção de arquivos, adicionando funcionalidades extras e aprimorando a proteção contra a violação dos limites estabelecidos.

Melhorando Alertas e Resetando a Seleção de Arquivos

Refine o manipulador de eventos onChange para tornar a interface mais amigável.

Restrição de Tipos de Arquivo

Para especificar os formatos de arquivo aceitáveis, use o atributo accept:

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

Testando em Diferentes Navegadores

Verifique como sua solução funciona em vários navegadores para garantir um comportamento consistente.

Limitação de Taxa e Desempenho

Ao lidar com um grande número de arquivos, a limitação de taxa ou o uso de Web Workers podem ser benéficos. Isso ajudará a evitar lentidão na interface.

Tal configuração do elemento de seleção de arquivos garantirá um funcionamento confiável com restrições.

Recursos Úteis

1. Elemento HTMLElement: evento change - Web API | MDN — Detalhes sobre o evento change do MDN.
2. Atributo múltiplo de entrada HTML — Uma exploração detalhada do atributo multiple no W3Schools.
3. Padrão HTML — Um mergulho profundo na especificação HTML sobre input file.
4. Introdução aos Eventos do Navegador — Noções básicas de como trabalhar com eventos JavaScript no navegador.
5. Lendo Arquivos em JavaScript | web.dev — Um artigo dedicado à leitura de arquivos usando JavaScript.
6. .prop() | Documentação da API jQuery — Descrição do uso do método .prop() no jQuery.

Video

Navigation