Validação de tamanho de upload de arquivo JavaScript

Existe alguma maneira de verificar o tamanho do arquivo antes de enviá-lo usando JavaScript?

   

Sim , há um novo recurso do W3C que é suportado por alguns navegadores modernos, a API de arquivos . Ele pode ser usado para essa finalidade e é fácil testar se ele é suportado e voltar (se necessário) para outro mecanismo, se não for.

Aqui está um exemplo completo:

< !DOCTYPE HTML>    Show File Data     

E aqui está em ação. Tente isso com uma versão recente do Chrome ou Firefox.


Um pouco fora do tópico, mas: Observe que a validação do lado do cliente não substitui a validação do lado do servidor. A validação do lado do cliente é puramente para possibilitar uma melhor experiência ao usuário. Por exemplo, se você não permitir o upload de um arquivo com mais de 5 MB, poderá usar a validação do lado do cliente para verificar se o arquivo escolhido não tem mais de 5 MB e fornecer uma mensagem amigável se ele for (para que eles não gastem todo esse tempo enviando apenas para obter o resultado jogado fora no servidor), mas você também deve impor esse limite no servidor, pois todos os limites do lado do cliente (e outras validações) podem ser contornados.

Usando jquery:

 
Upload image:

Funciona para elemento de arquivo dynamic e estático

Solução Apenas Javascript

 function ValidateSize(file) { var FileSize = file.files[0].size / 1024 / 1024; // in MB if (FileSize > 2) { alert('File size exceeds 2 MB'); // $(file).val(''); //for clearing with Jquery } else { } } 
   

Não Sim, usando a API de arquivos em navegadores mais recentes. Veja a resposta de TJ para detalhes.

Se você precisar também de suporte a navegadores mais antigos, será necessário usar um carregador baseado em Flash, como o SWFUpload ou o Uploadify, para fazer isso.

A demonstração de resources do SWFUpload mostra como a configuração file_size_limit funciona.

Note que isso (obviamente) precisa do Flash, e a maneira como funciona é um pouco diferente dos formulários de upload normais.

Se você estiver usando o jQuery Validation, você pode escrever algo assim:

 $.validator.addMethod( "maxfilesize", function (value, element) { if (this.optional(element) || ! element.files || ! element.files[0]) { return true; } else { return element.files[0].size < = 1024 * 1024 * 2; } }, 'The file size can not exceed 2MB.' ); 

É bem simples.

  var oFile = document.getElementById("fileUpload").files[0]; //  if (oFile.size > 2097152) // 2 mb for bytes. { alert("File size must under 2mb!"); return; } 

Eu uso uma function Javascript principal que encontrei no site da Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , juntamente com outra function com AJAX e modificada de acordo com as minhas necessidades. Ele recebe um id do elemento do documento referente ao lugar no meu código html onde eu quero escrever o tamanho do arquivo.

  function updateSize(elementId) { var nBytes = 0, oFiles = document.getElementById(elementId).files, nFiles = oFiles.length; for (var nFileId = 0; nFileId < nFiles; nFileId++) { nBytes += oFiles[nFileId].size; } var sOutput = nBytes + " bytes"; // optional code for multiples approximation for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) { sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")"; } return sOutput; }      document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");  

Felicidades

Mesmo que a pergunta seja respondida, eu queria postar minha resposta. Pode ser útil para futuros espectadores. Você pode usá-lo como no código a seguir.

   

O exemplo de JQuery fornecido neste tópico era extremamente desatualizado, e o Google não foi de todo útil, então aqui está minha revisão:

   

Você pode tentar este multipassage

Ele funciona bem no IE6 (e avove), Chrome ou Firefox

Se você definir o “Modo de Documento” para “Padrões”, poderá usar o método “tamanho” do javascript simples para obter o tamanho do arquivo enviado.

Defina o Ie ‘Document Mode’ como ‘Standards’:

  

Então, use o método javascript ‘size’ para obter o tamanho do arquivo enviado:

  

Funciona para mim.