Cliente ¿Comprueba el tamaño del archivo con HTML5?

84

Estoy tratando de montar la ola HTML5 pero me enfrento a un pequeño problema. Antes de HTML5, verificábamos el tamaño del archivo con flash, pero ahora la tendencia es evitar el uso de flash en aplicaciones web. ¿Hay alguna forma de verificar el tamaño del archivo en el lado del cliente usando HTML5?

javascript html file-upload Khaled Musaied
fuente

Respuestas:

126

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
}
Abdullah Jibaly
fuente
Me funciona en IE 10, Mozilla FFx y Chrome. ¡Gracias!
Rahnzo
funciona bien, simplemente no lo está usando correctamente; inicie sesión en el evento onchange de la entrada y estará bien.
dandavis
@dandavis Estoy usando el código en la respuesta. Si el código funciona bien, ¿por qué necesito cambiarlo?
Chuck Le Butt
1
@Chuck su ejemplo no funciona porque intenta leer la lista de archivos al cargar la página, antes de seleccionar cualquier archivo.
aproximadamente
1
@Chuck: ok, funciona bien, y lo pegaste bien, pero solo no es suficiente. si lo ejecutó en la consola después de completar el archivo, verá que funciona bien. para las aplicaciones, la consola no es buena, por lo que debe colocar el código en un evento que se ejecute después de que se complete la entrada, para que funcione como se espera. Perdón por el malentendido.
dandavis
33

La respuesta aceptada es realmente correcta, pero debe vincularla a un detector de eventos para que se actualice cada vez que 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, el siguiente código puede ser útil

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

Dado que la conversión de fileSize para mostrar en cualquier métrica depende de usted.

Ammadu
fuente
Su ejemplo de jQuery no funciona. No parece que pueda usar jQuery con .files: jsfiddle.net/edxvo4wa (descubrí esto yo mismo cuando se me ocurrió una solución; funciona si la cambia a document.getElementById).
Chuck Le Butt
1
@Chuck lo siento por el error allí, he actualizado mi respuesta con la que funciona
Ammadu
7

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

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

de manera similar, la API de archivo da nombre y tipo.

Konga Raju
fuente
3

Personalmente, optaría por este formato:

    $('#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
      }
    }
Alejandro León
fuente
1
Creo que 500kb sería en realidad 500 * 1024. No es gran cosa, pero el usuario final con un archivo de 500.000b lo vería como 488kb y se negó. Y aquí comienza la gran frustración
Apolo
2

"No hay una solución simple para varios navegadores para lograr esto": ¿ Detecta el tamaño de carga del archivo en el lado del cliente?

Julien
fuente
10
Agregue también la validación del tamaño del servidor, pero también podría ahorrarles el dolor a aquellos con navegadores modernos y verificarlo también en el lado del cliente.
El Yobo