Cliente Comprobando el tamaño del archivo usando HTML5?

Question

Estoy tratando de montar la ola HTML5, pero estoy enfrentando un pequeño problema. Antes de HTML5, estábamos verificando el tamaño del archivo con flash, pero ahora la tendencia es evitar el uso de flash en las aplicaciones web. ¿Hay alguna manera de verificar el tamaño del archivo en el lado del cliente utilizando HTML5?

Answer 1

Esto funciona. Colóquelo dentro de un detector de eventos para cuando cambie la entrada.

if (typeof FileReader !== "undefined") { 
    var size = document.getElementById('myfile').files[0].size; 
    // check file size 
} 

Answer 2

"hay una solución simple, multi-navegador para lograr esto": Detecting file upload size on the client side?

Answer 3

HTML5 fie api admite para verificar el tamaño del archivo.

Lee este artículo para obtener más información sobre la API de archivos

http://www.html5rocks.com/en/tutorials/file/dndfiles/

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


var size = document.getElementById("fileInput").files[0].size; 

el archivo de manera similar API da nombre y tipo.

Answer 4

Uploadify puede cargar archivos con HTML5. También hay una versión flash.

Puede establecer los límites en el tamaño del archivo, con el parámetro 'fileSizeLimit'.

Answer 5

La respuesta aceptada es en realidad correcta, pero debe vincularla a un detector de eventos para que se actualice cuando se cambie la entrada del archivo.

document.getElementById('fileInput').onchange = function(){ 
    var filesize = document.getElementById('fileInput').files[0].size; 
    console.log(filesize);  
} 

Si está utilizando la biblioteca jQuery entonces el siguiente código puede venir a mano

$('#fileInput').on('change',function(){ 
    if($(this).get(0).files.length > 0){ // only if a file is selected 
    var fileSize = $(this).get(0).files[0].size; 
    console.log(fileSize); 
    } 
}); 

Teniendo en cuenta que la conversión del tamaño de archivo para que aparezca en la que cada vez métrica depende de usted.

Answer 6

En lo personal, yo optaría por este formato: validación

$('#inputFile').bind('change', function(e) { 
     var data = e.originalEvent.target.files[0]; 
     // and then ... 
     console.log(data.size + "is my file's size"); 
     // or something more useful ... 
     if(data.size < 500000) { 
     // what your < 500kb file will do 
     } 
    }