Como verificar o tamanho da input do arquivo com jQuery?

Eu tenho um formulário com resources de upload de arquivos e gostaria de ter um bom relatório de erro do lado do cliente se o arquivo que o usuário está tentando enviar é muito grande, existe uma maneira de verificar o tamanho do arquivo com jQuery, seja puramente no cliente ou de alguma forma postando o arquivo de volta para o servidor para verificar?

Na verdade, você não tem access ao sistema de arquivos (por exemplo, ler e gravar arquivos locais); no entanto, devido à especificação HTML5 File Api, há algumas propriedades de arquivo às quais você tem access e o tamanho do arquivo é uma delas.

Para o HTML abaixo

 

tente o seguinte:

 //binds to onchange event of your input field $('#myFile').bind('change', function() { //this.files[0].size gets the size of your file. alert(this.files[0].size); }); 

Como é parte da especificação HTML5, ele funcionará apenas para navegadores modernos (v10 necessário para o IE) e eu adicionei aqui mais detalhes e links sobre outras informações de arquivo que você deve saber: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-checking-the-file-size /


Suporte a navegadores antigos

Esteja ciente de que os navegadores antigos retornarão um valor null para a chamada this.files anterior, portanto, o access a this.files[0] gerará uma exceção e você deverá verificar o suporte da API de Arquivos antes de usá-lo.

Se você quiser usar o validate do jQuery, você pode criar este método:

 $.validator.addMethod('filesize', function(value, element, param) { // param = size (en bytes) // element = element to validate () // value = value of the element (file name) return this.optional(element) || (element.files[0].size < = param) }); 

Você usaria isso:

 $('#formid').validate({ rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } }); 

Este código:

 $("#yourFileInput")[0].files[0].size; 

Retorna o tamanho do arquivo para uma input de formulário.

No FF 3.6 e posterior, este código deve ser:

 $("#yourFileInput")[0].files[0].fileSize; 

Também estou postando minha solução, usada para um controle FileUpload ASP.NET. Talvez alguém ache útil.

  $(function () { $('< %= fileUploadCV.ClientID %>').change(function () { //because this is single file upload I use only first index var f = this.files[0] //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes) if (f.size > 8388608 || f.fileSize > 8388608) { //show an alert to the user alert("Allowed file size exceeded. (Max. 8 MB)") //reset file upload control this.value = null; } }) }); 

Você pode fazer esse tipo de verificação com o Flash ou o Silverlight, mas não com o Javascript. A sandbox javascript não permite access ao sistema de arquivos. A verificação de tamanho precisa ser feita no servidor após o upload.

Se você quiser ir a rota do Silverlight / Flash, você pode verificar se eles não estão instalados para o padrão para um manipulador de upload de arquivo regular que usa os controles normais. Desta forma, se o Silverlight / Flash instalado tiver a experiência, será um pouco mais rico.

Por favor, tente isso:

 var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on var sizeLimit= 30; if (sizeInKB >= sizeLimit) { alert("Max file size 30KB"); return false; } 
 

Descobri que isso é o mais fácil se você não planeja enviar o formulário por meio dos methods padrão ajax / html5, mas é claro que funciona com qualquer coisa.

NOTAS:

 var size = $('#uploadForm')["0"]["0"].files["0"].size; 

Isso costumava funcionar, mas não no chrome mais, eu apenas testei o código acima e ele funcionou tanto em ff como em chrome (lastest). O segundo [“0”] é agora firstChild.