¿Cómo verificar el tamaño de entrada del archivo con jQuery?

Tengo un formulario con capacidades de carga de archivos y me gustaría poder tener un buen informe de errores del lado del cliente si el archivo que el usuario intenta cargar es demasiado grande, ¿hay alguna manera de verificar el tamaño del archivo con jQuery, ya sea simplemente en el cliente o de alguna manera publicar el archivo de nuevo en el servidor para verificar?

En realidad, no tiene acceso al sistema de archivos (por ejemplo, leer y escribir archivos locales), sin embargo, debido a la especificación de HTML5 File Api, hay algunas propiedades de archivo a las que tiene acceso, y el tamaño del archivo es una de ellas.

Para el HTML a continuación

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

prueba lo siguiente:

//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 es parte de la especificación HTML5, solo funcionará para navegadores modernos (se requiere v10 para IE) y agregué aquí más detalles y enlaces sobre otra información de archivo que debe conocer: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-comprobación-del-archivo-tamaño /

Soporte de navegadores antiguos

Tenga en cuenta que los navegadores antiguos devolverán un nullvalor para la this.filesllamada anterior , por lo que el acceso this.files[0]generará una excepción y debe verificar el soporte de API de archivos antes de usarlo

Si desea utilizar jQuery, validatepuede crear 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) 
});

Lo usarías:

$('#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;

Devuelve el tamaño del archivo para una entrada de formulario.

En FF 3.6 y posterior, este código debería ser:

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

Estoy publicando mi solución también, utilizada para un FileUploadcontrol ASP.NET . Quizás alguien lo encuentre ú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 a continuación para verificar el tamaño del archivo y borrar si es mayor,

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

Puede hacer este tipo de verificación con Flash o Silverlight pero no con Javascript. El sandbox de javascript no permite el acceso al sistema de archivos. La verificación del tamaño debería realizarse en el lado del servidor después de que se haya cargado.

Si desea ir a la ruta Silverlight / Flash, puede verificar que si no están instalados por defecto en un controlador de carga de archivos normal que utiliza los controles normales. De esta manera, si tienen instalado Silverlight / Flash, su experiencia será un poco más 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>

Encontré que esto es lo más fácil si no planea enviar el formulario a través de los métodos estándar ajax / html5, pero, por supuesto, funciona con cualquier cosa.

NOTAS

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

Esto solía funcionar, pero ya no funciona en Chrome, solo probé el código anterior y funcionó tanto en ff como en Chrome (último). El segundo ["0"] ahora es firstChild.

Por favor intente esto:

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