Obtener atributos Width y Height de imagenes seleccionadas con imput File?

mape367 · #1 (**permalink**) 12/10/2006, 08:05

Buenas

Tengo una duda, quisiera obtener las dimensiones de las imagenes que los usuarios de mi web puedan subir al servidor, validando un tamaño máximo.

Me gustaría validar eso ya del lado del cliente, para no enviar datos no válidos al servidor.

Sé que se puede hacer en php, pero quisera hacerlo en javascript.

Alguna ayuda?

Desde ya muchas gracias.

Saludos

caricatos · #2 (**permalink**) 12/10/2006, 08:18

Hola:

Lo mejor es hacerlo en el servidor, ya que por razones de seguridad, los navegadores tienen problemas para averiguar esos datos... creo que solo es posible con explorer, pero supongo que los visitantes de tu web serán vaiopintos.

Saludos

mape367 · #3 (**permalink**) 12/10/2006, 11:56

Gracias por responder caricatos

Yo necesito realizarlo del lado del cliente, ya que los usuarios podrian no tener tanta paciencia para esperar que se cargen los archvivos y recargue la pagina mostrando los errores (si los hubiere), además, prefiero no cargar tanto el servidor con esos procesos.

He pensado en una solución, lo que hago es activar una función javascript al ocurrir el evento onChange del imput file. Verificando que la extensión del archivo sea correcta (Gif / Jpg) y asignando ese archivo al atributo src de una imagen contenida en una capa oculta.

Luego de eso, se pueden obtener las propiedades with y Height de la imagen.

El problema esta en que si se selecciona una imagen muy grande, la imagen crece y tambien la página, apareciendo los scrolls que antes no estaban. Alguna idea de como evitar eso?

Aqui les dejo el código sin la validación de extensión:

Código HTML:

<html>
<head>
<title>Atributo Width y Height de Imagenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function cambiar()
{	
	obj = document.getElementById('imagen');
	obj.src = document.form1.file.value;
	alert('Width='+obj.width+'     Height='+obj.height)
}

</script>

</head>

<body>
<div id="capa" style="position:absolute; left:46px; top:86px; width:76px; height:63px; z-index:1; visibility:hidden" >
<img id="imagen" src="../imagenes/datacoper.jpg" ></div>
<form action="" method="post" enctype="multipart/form-data" name="form1">
  <input type="file" name="file" onChange="cambiar();">
</form>
</body>
</html>

Desde ya muchas gracias

Saludos