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

Question

Tengo un formulario con capacidades de carga de archivos y me gustaría poder tener algunos buenos informes de errores del lado del cliente si el archivo que el usuario está tratando de 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, hay algunas propiedades de archivo a las que tiene acceso y el tamaño del archivo es uno de ellos.

Para el HTML

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

pruebe 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 se trata de una parte de la especificación de HTML 5, que sólo funcionará para los navegadores modernos (v10 requeridos para IE) y He añadido here más detalles y enlaces sobre otros archivos de información que debe saber: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

navegadores viejos apoyan

Tenga en cuenta que los navegadores antiguos volverán un valor null para la this.files llamada anterior, por lo que el acceso a this.files[0] lanzará una excepción y que debiera check for File API support antes de usarlo

Answer 2

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 ir a la ruta Silverlight/Flash, puede verificar si no están instalados de forma predeterminada a 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 3

Si desea utilizar jQuery de validate que pueda mediante la creación de 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) 
}); 

usted podría utilizarlo:

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

este código:

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

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

En FF 3.6 y más tarde este código debe ser:

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

Answer 5

Estoy publicar mi solución también se usa para una FileUpload control de 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; 
     } 
    }) 
}); 

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 pareció que para ser el más fácil si usted no planea enviado el formulario a través norma ajax/html5 métodos, pero por supuesto que funciona con cualquier cosa.

NOTAS:

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

Esta utilizan para trabajar, pero no es así en cromo más, Acabo de probar el código anterior y funcionó tanto en FF y cromo (lastest). El segundo ["0"] ahora es firstChild.