¿Cómo puedo validar el tamaño del archivo en el lado del cliente usando JavaScript? Estoy usando type=file para seleccionar el archivocómo validar el tamaño del archivo usando HTML y Javascript en el lado del cliente
ACTUALIZACIÓN 2013 a partir de esta edición, la API de archivos es compatible con todos los principales navegadores, y en IE partir de la versión 10
http://caniuse.com/#search=file%20api
Usted puede aún desea usar SWFUpload si todavía necesita soportar IE9 y versiones anteriores, aunque en este punto probablemente debería ser más un retroceso, ya que la api del archivo html5 tiene soporte en plataformas móviles a las que SWFUpload no puede llegar. La api del archivo html5 se basa en la api del archivo de Firefox como se indica a continuación.
Ver también esta pregunta duplicado Client Checking file size using HTML5?
ACTUALIZACIÓN: Firefox ha cambiado su API a esta https://developer.mozilla.org/en/DOM/FileReader
Puede hacerlo en Firefox como tal
html:
<form action="" method="get" accept-charset="utf-8"> <input type="file" name="file" value="" id="file"> <p><input type="submit" value="Continue →"></p> </form>
javascript:
var filesize = document.forms[0].file.files[0].fileSize
si hay una manera de hacer esto en el IE, no lo sabía. Probablemente involucra activeX u otro tipo de basura.
edición: yo encontramos este here, cómo hacer esto en IE
<head>
<script>
function getSize()
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>
Tal vez usted podría utilizar SWFUpload lugar, que es una pequeña aplicación Flash que se encarga de la parte cliente de la carga para usted. Desde su lista de características:
Me gustaría combinar las dos formas diferentes de verificar el tamaño del archivo en el lado del cliente usando javascript. Lo he probado en FF/IE/Chrome y funciona bien:
<script type="text/javascript">
function checkBrowser()
{
if(navigator.appName == "WebTV")
{
alert("You're using the WebTV browser.")
}
if(navigator.appName == "Netscape")
{
checkFileSizeFF();
}
if(navigator.appName == "Microsoft Internet Explorer")
{
checkFileSizeIE();
}
}
function checkFileSizeFF()
{
var filesize = document.forms[0].file.files[0].fileSize;
alert(filesize/(1024*1024) + " MB");
}
function checkFileSizeIE()
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size/(1024*1024);
alert(size + "MB");
}
</script>
<form action="" method="get" accept-charset="utf-8" name="upload">
<input type="file" name="file" value="" id="file">
<p><input type="submit" value="Continue →" onclick="checkBrowser()"></p>
</form>
<div id="example"></div>
+1 No lo sabía - borré mi publicación. – Amarghosh
+1 Si bien este es un buen enfoque (utilizando Javascript de lo que se trataba la pregunta original), en realidad solo está haciendo una solución para dos navegadores. Por supuesto, estos son dos de los navegadores más populares, pero si necesita compatibilidad con varios navegadores/plataformas, puede resultar bastante difícil de implementar. –
JavaScript no puede ser un reemplazo para verificar el tamaño del archivo en el servidor. Si el objetivo es simplemente ahorrar algunos recursos, entonces ese objetivo es posible, creo. – Breton