¿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 que el usuario cargue archivos de más de 1 MB. ¿Hay alguna manera de verificar el tamaño de carga del archivo usando JavaScript?

Mi código actualmente se parece a esto:

<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

Otro que aquiring el nombre del archivo que no hay manera para que usted pueda averiguar cualquier otro detalle sobre el archivo en javascript incluyendo 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

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

Answer 3

No creo que haya ninguna forma de haciendo eso con JS simple desde una página web.
Con una extensión de navegador tal vez, 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 4

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

Answer 5

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

En el caso de onchange<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 6

Ver aquí:

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

Como a todo el pueblo diciendo que esto se tiene que hacer del lado del servidor, que están absolutamente perfecto que hace.

En mi caso, aunque el tamaño máximo, excepto 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 tengo que hacer un control adicional antes de que envíen la página por motivos de usabilidad.

Answer 7

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

Answer 8

Ahora es posible obtener el tamaño de archivo usando JavaScript puro. Casi todos los navegadores admiten FileReader, que puede usar para leer el tamaño del archivo y mostrar la imagen sin cargar el archivo al servidor.link

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

Usted puede obtener directamente de tamaño de archivo objeto de archivo utilizando el código siguiente.

var fileSize = oFile.size;