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

135

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?

Palanqueta
fuente

Respuestas:

275

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

Felipe Sabino
fuente
66
Todos dicen que esto no se puede hacer, pero aquí está. Esto funciona. Lo probé
Peter
35
@Jeroen Estoy de acuerdo en que no trabajar para IE hace que no sea la solución ideal para mucha gente, pero ¿no está haciendo un voto negativo y diciendo que la respuesta es demasiado inútil? Utilicé esta solución en una gran variedad de soluciones web empresariales que tenían la necesidad de trabajar solo en Chrome y / o Firefox, y algunas personas que buscan esta solución podrían estar en el mismo lugar, por lo que esta solución será lo suficientemente buena .
Felipe Sabino
3
Acabo de encontrar esta respuesta en Google y la voy a usar para evitar que los usuarios publiquen archivos que tengan un tamaño determinado; Como también compruebo los tamaños de archivo en el lado del servidor, estoy feliz de tener una solución del lado del cliente que no funciona en IE8.
Steve Wilkes
2
@GaolaiPeng Este error probablemente se deba a que el jQueryarchivo javascript no se agregó (o no se cargó correctamente). ¿Lo has agregado en headtu página?
Felipe Sabino
1
@volumeone Es por eso que dije que debería "verificar el soporte de API de archivos antes de usarlo" en mi respuesta y luego podría cambiar la interfaz de usuario en consecuencia.
Felipe Sabino
41

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" }
});
Naoise Golden
fuente
1
@Dan sí, la propiedad de tamaño de archivo es parte de la especificación HTML5, por lo que solo funcionará para navegadores modernos (para IE sería la versión 10+)
Felipe Sabino
77
Has utilizado incorrectamente la acceptregla, donde deberías haber usado la extensionregla. ~ La acceptregla es solo para tipos MIME. La extensionregla es para extensiones de archivo. También debe incluir el additional-methods.jsarchivo de estas reglas.
Sparky
Complementando el comentario asertivo de @ Sparky: $('#formid').validate({ rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });
victorf
26

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;
jeferod83
fuente
2
Su primer código funciona en Chrome, pero el segundo no funciona para FireFox más reciente.
Débora el
Ese segundo código es el que tuve que usar para todos los navegadores modernos (2014+).
Dreamcasting
1
El primer código funciona IE 10, 11, Edge, Chrome, Safari (versión de Windows), Brave y Firefox.
Mashukur Rahman
12

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;
        }
    })
});
Besnik Kastrati
fuente
1
Debe comprobar el valor de nulo f = this.files[0]o esto fallará en los navegadores más antiguos. Por ejemploif (f && (f.size > 8388608 || f.fileSize > 8388608))
Gone Coding
9

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('');
     }
    });
Umesh Patil
fuente
1
Debería usar $ (this) .val (null); De lo contrario, el formulario ya no parece enviarse correctamente sin seleccionar un archivo adjunto adecuado.
Kevin Grabher
1

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.

Kelsey
fuente
1
<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.

Dillon Burnett
fuente
0

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;
}
Bablu Ahmed
fuente