20.02.2025

Limite de Tamanho de Upload de Arquivo em HTML e jQuery

Resposta Rápida

Para definir um limite de tamanho de arquivo usando o elemento <input type="file">, aplique JavaScript. Anexe um manipulador de eventos ao atributo change, que verifica o tamanho do arquivo após o usuário selecionar um arquivo e exibe um aviso, se necessário. Aqui está um exemplo de código:

document.querySelector('#fileUpload').onchange = function() {
  if (this.files[0].size > 1048576) { // Limite de tamanho de arquivo de 1MB: 1024 * 1024
    alert('Tamanho do arquivo excedido, por favor, selecione um arquivo menor que 1MB.');
    this.value = '';
  }
};

Não esqueça de realizar validação do lado do servidor por motivos de segurança. Use o elemento HTML <input type="file" id="fileUpload">.

Lidando com Versões Antigas de Navegadores

Navegadores com capacidades limitadas, como IE7+, não suportam a API de Arquivos do HTML5. Nesses casos, utilize soluções alternativas baseadas em Flash ou Silverlight, ou recomende a atualização do navegador. O IE9 possui a propriedade files, mas trabalhar com o atributo size é complicado.

Além disso, é importante fornecer feedback: informe os usuários sobre o tamanho máximo de arquivo permitido e sugira opções para comprimir ou dividir arquivos para melhorar a experiência do usuário.

Verificações do Lado do Servidor

Soluções do lado do cliente nem sempre são confiáveis: é possível contornar scripts do cliente. Portanto, faça verificações do lado do servidor. Especificar um tamanho máximo de arquivo em um campo oculto MAX_FILE_SIZE permite que você passe informações para o servidor, mas o servidor deve verificar após receber o arquivo.

<input type="hidden" name="MAX_FILE_SIZE" value="1048576" /> <!-- O tamanho máximo do arquivo é 1MB -->

Visualização

Vamos ilustrar isso com um exemplo visual de um elevador com um limite de peso:

🏢 Serviço de Upload de Arquivos 🏢
Peso Máx. (tamanho do arquivo): 5MB

<input type="file" oninput="checkFileSize(this)" />

function checkFileSize(input) {
  if(input.files[0].size > 5 * 1024 * 1024) { // Limite de tamanho de arquivo de 5MB
    alert('Peso permitido excedido. Por favor, reduza o tamanho do arquivo.');
    input.value = ''; // Impede upload de arquivos muito grandes
  }
}

Aqui, o elemento input funciona como um sensor de peso, bloqueando o upload de arquivos que excedem o limite estabelecido.

Testes entre Navegadores

Assegure-se de que sua solução em JavaScript seja compatível com vários navegadores, incluindo versões mais antigas de IE7+, assim como Chrome e Firefox 3.6+. Você pode depurar e testar usando ferramentas como jsfiddle ou CodePen, que permitem criar e testar exemplos funcionais facilmente.

Exibindo Lista de Arquivos

Forneça aos usuários uma lista de arquivos selecionados e seus tamanhos antes de submetê-los, para que possam revisar. Destaque os arquivos que excedem o limite estabelecido e exclua-os do upload:

let list = document.querySelector('#fileList');
let fileInput = document.getElementById('fileUpload');
fileInput.addEventListener('change', function() {
  let files = fileInput.files;
  let message = "Arquivos prontos para upload:\n";

  for (let i = 0; i < files.length; i++) {
    if (files[i].size > 1048576) {
      alert(`O arquivo ${files[i].name} excede o tamanho permitido para upload.`);
    } else {
      message += `${files[i].name} - ${(files[i].size / 1024 / 1024).toFixed(2)} MB\n`;
    }
  }

  list.textContent = message;
});

Isso dará aos usuários uma compreensão do porquê alguns arquivos não podem ser enviados.

Recomendações para Usuários

Se um usuário tentar fazer upload de um arquivo que exceda o limite definido, ofereça opções concretas para resolver o problema: compressão ou divisão do arquivo em partes. Isso ajudará a alcançar suas tarefas sem exceder os limites estabelecidos.

Medidas de Segurança

Do lado do cliente, valide tamanhos e tipos de arquivos para minimizar o risco de uploads incorretos. Use o atributo accept para especificar os tipos de arquivos permitidos:

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

Isso ajudará a reduzir a probabilidade de uploads de arquivos maliciosos. É importante lembrar que verificações do lado do cliente sozinhas não são suficientes!

Recursos Úteis

1. <input type="file"> - HTML: Linguagem de Marcação de Hipertexto | MDN — um guia detalhado sobre elementos de entrada de arquivo em HTML do MDN Web Docs.
2. Atributo 'accept' do input de arquivo - é útil? - Stack Overflow — uma discussão sobre a utilidade do atributo accept no Stack Overflow.
3. Atributo accept do input HTML - W3Schools — um guia sobre como usar o atributo accept para definir limites de tipo de arquivo.
4. Padrão HTML - Estado de Upload de Arquivo — descrição das especificações do WHATWG para uploads de arquivos em formulários HTML.
5. Validação de tamanho de upload de arquivo em JavaScript - Stack Overflow — uma coleção de técnicas para validar tamanhos de arquivos do lado do cliente usando JavaScript.
6. Ler arquivos em JavaScript | Artigos | web.dev — um artigo sobre métodos para ler e processar arquivos em JavaScript.
7. GitHub - pqina/filepond: 🌊 Uma biblioteca JavaScript flexível e divertida para upload de arquivos — um repositório do GitHub para a biblioteca FilePond, permitindo uploads interativos de arquivos usando JavaScript.

Video

Navigation