javascript - type - Cómo verificar el tamaño de entrada del archivo con jQuery?

validar tamaño imagen laravel

Question

Tengo un formulario con capacidades de carga de archivos y me gustaría tener algunos informes de error del lado del cliente si el archivo que el usuario está intentando cargar es demasiado grande, ¿hay alguna manera de verificar el tamaño del archivo con jQuery, ya sea puramente? en el cliente o de alguna manera publicar el archivo de nuevo en el servidor para comprobar?

Answer 1

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

Para el HTML a continuación

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

intente 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 los navegadores modernos (se requiere v10 para IE) y agregué here más detalles y enlaces sobre otra información de archivos que debe conocer: here

Soporte de viejos navegadores

Tenga en cuenta que los navegadores antiguos devolverán un valor null para la llamada anterior this.files , por lo que acceder a this.files[0] generará una excepción y deberá verificar si admite la API de archivos antes de usarlo.

Answer 2

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;

Answer 3

Estoy publicando mi solución también, utilizada para un control ASP.NET FileUpload . 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;
        }
    })
});

Answer 4

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

Si desea utilizar la ruta Silverlight / Flash, puede verificar si no están instalados de forma predeterminada en un controlador de carga de archivos normal que utiliza los controles normales. De esta forma, si tienen instalado Silverlight / Flash, su experiencia será un poco más rica.

Answer 5

Si desea validate jQuery, puede 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" }
});

Answer 6

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

Me parece que es más fácil si no planeas 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 está en Chrome, acabo de probar el código anterior y funcionó tanto en ff como en cromo (lastest). El segundo ["0"] ahora es firstChild.