¿Cómo puedo obtener el tamaño de carga de un archivo usando Javascript simple?

Question

Tengo la funcionalidad de subir archivos en una de las páginas. Compruebo la extensión del archivo usando JavaScript. Ahora quiero restringir al usuario de cargar archivos de más de 1 MB. ¿Hay alguna forma de verificar el tamaño de carga del archivo usando JavaScript?

Mi código actualmente se ve así:

<script language="JavaScript">
function validate() {
   var filename = document.getElementById("txtChooseFile").value;
   var ext = getExt(filename);
   if(ext == "txt" || ext == "csv")
      return true;
   alert("Please upload Text files only.");
   return false;
}

function getExt(filename) {
   var dot_pos = filename.lastIndexOf(".");
   if(dot_pos == -1)
      return "";
   return filename.substr(dot_pos+1).toLowerCase();
}
</script>

Answer 1

Aparte de que al obtener el nombre de archivo no hay forma de que pueda encontrar otros detalles sobre el archivo en JavaScript, incluido su tamaño.

En su lugar, debe configurar la secuencia de comandos del lado del servidor para bloquear una carga de gran tamaño.

Answer 2

Ver http://www.w3.org/TR/FileAPI/ . Es compatible con Firefox 3.6; No conozco otros navegadores.

Dentro del evento onchange de un <input id="fileInput" type="file" /> simplemente:

var fi = document.getElementById('fileInput');
alert(fi.files[0].size); // maybe fileSize, I forget

También puede devolver el contenido del archivo como una cadena, y así sucesivamente. Pero, de nuevo, esto solo puede funcionar con Firefox 3.6.

Answer 3

Ahora es posible obtener el tamaño del archivo usando JavaScript puro. Casi todos los navegadores admiten FileReader, que puede usar para leer el tamaño del archivo, así como también puede mostrar la imagen sin cargar el archivo en el servidor. enlace

Código:

    var oFile = document.getElementById("file-input").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");
    var reader = new FileReader();
    reader.onload = function (e) {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.

   };
   reader.readAsDataURL(oFile );

Puede obtener el tamaño del archivo directamente desde el objeto del archivo usando el siguiente código.

 var fileSize = oFile.size;

Answer 4

La mayoría de estas respuestas están muy desactualizadas. Actualmente es posible determinar el tamaño del archivo del lado del cliente en cualquier navegador que admita la API de archivos. Esto incluye, prácticamente, todos los navegadores que no sean IE9 y anteriores.

Answer 5

Podría ser posible utilizando una gran cantidad de código específico del navegador. Eche un vistazo a la fuente de TiddlyWiki , que logra salvarse en el disco duro del usuario enganchándose a Windows Scripting Host (IE), XPCOM (Mozilla), etc.

Answer 6

No creo que haya forma de hacerlo con JS simple desde una página web.
Tal vez con una extensión de navegador, pero desde una página JavaScript no puede acceder al sistema de archivos por razones de seguridad.

Flash y Java deberían tener restricciones similares, pero tal vez sean un poco menos estrictas.

Answer 7

no es posible. sería una gran preocupación de seguridad permitir que se ejecuten scripts del lado del cliente que puedan leer la información del archivo y el disco duro de los usuarios finales.

Answer 8

Ver aquí:

http: // www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

En cuanto a todas las personas que dicen que esto debe hacerse desde el lado del servidor, son absolutamente precisas.

En mi caso, aunque el tamaño máximo que haré es 128Mb, si un usuario intenta cargar algo que es 130Mb, no debería tener que esperar el tiempo de carga de 5 minutos para descubrir que es demasiado grande, así que necesito hacer un verificación adicional antes de enviar la página por razones de usabilidad.