Como verificar o tamanho da entrada do arquivo com o jQuery?

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

Na verdade, você não tem acesso ao sistema de arquivos (por exemplo, leitura e gravação de arquivos locais); no entanto, devido à especificação da API do arquivo HTML5, existem algumas propriedades de arquivo às quais você tem acesso e o tamanho do arquivo é uma delas.

Para o HTML abaixo

<input type="file" id="myFile" />

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 faz parte da especificação HTML5, ele funcionará apenas para navegadores modernos (é necessária a v10 necessária para o IE) e 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-check-the-file-size /

Suporte a navegadores antigos

Esteja ciente de que navegadores antigos retornarão um nullvalor para a this.fileschamada anterior ; portanto, o acesso this.files[0]gerará uma exceção e você deverá verificar o suporte à API de arquivos antes de usá-lo

Se você deseja usar o jQuery, validatepode criar este método:

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

Você usaria:

$('#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 entrada de formulário.

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

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

Também estou postando minha solução, usada para um FileUploadcontrole 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;
        }
    })
});

Use abaixo para verificar o tamanho do arquivo e limpar se é maior,

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

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

Se você quiser seguir a rota do Silverlight / Flash, verifique se eles não estão instalados como padrão para um manipulador de upload de arquivo comum que usa os controles normais. Dessa forma, se o Silverlight / Flash estiver instalado, a experiência será um pouco mais rica.

<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

Achei isso mais fácil se você não planeja enviar o formulário por meio de métodos 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 funciona mais no chrome, apenas testei o código acima e funcionou no ff e no chrome (ultimo). O segundo ["0"] agora é firstChild.

Por favor, tente o seguinte:

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;
}