Validar imagen y redimensionar.

[pempas]

Hola a todo el mundo,

Lo que pido para mi es un mundo y llevo dos días dándole vueltas pero no consigo que funcione.

Tengo un formulario en el que el usuario va a subir una imagen, junto con más datos, yo lo que quiero es que antes de que el usuario valide el formulario, pueda precargar la imagen y validarla con javascript.

Pongo lo que tengo hecho hasta ahora, eh intentado hacer un popurrí con diferentes códigos encontrados en el foro, pero no da resultado.

Función JavaScript:

Código PHP:

  <script language="javascript" type="text/javascript">
function muestraimagen(rutaimagen) {
var imagen = new Image();
imagen.src = rutaimagen;
cargando();
}
function cargando() {
if (imagen.complete) {
ancho = imagen.width;
alto = imagen.height;
minifoto(ancho,alto,imagen.src);
//Y aqui ya el window.open etc...
} else {
setTimeout("cargando()", 100);
}
}
 
var maxAncho = 200; //define la anchura máxima de la imagen
var maxAlto = 200; //define la altura máxima de la imagen
function minifoto(ancho,alto,nombre)
{
if (ancho >= alto) {forma = 'apaisada'}
if (ancho < alto) {forma = 'retrato'}
if(forma == 'apaisada')
{
if(ancho > maxAncho)
{
porcientoAnchura = parseInt(maxAncho/ancho*100);
document.img0.src=imagen.src
eval("document.img0.width = maxAncho");
eval("document.img0.height = porcientoAnchura*alto/100");
}
}
else if (forma == 'retrato')
{
if (alto > maxAlto)
{
porcientoAltura = maxAlto/alto*100;
document.img0.src=imagen.src
eval("document.img0.height = maxAlto");
eval("document.img0.width = porcientoAltura*ancho/100");
}
}
}
</script> 
  

Ahora la llamada la hago de la siguiente manera, tengo un objeto image con un id llamado "img0":

Código PHP:

  <img src="" name="img0" id="img0" /> 
   

Y también un botón de examinar, que quiero que cuando el usuario lo pulse, carge la imagen en el objeto image redimensionada.

Código PHP:

  <input name="attach1" type="file" ID="attach1" size=25 onChange="muestraimagen(this.value);"> 
   

También me gustaría que me validase que no ocupara más de 300Kb pero no tengo ni idea de como hacer eso, he visto ejemplos pero no sé como implementarlo.

¿Qué puede estar fallando?

Muchas gracias a todo el mundo porque en javascript soy un auténtico melón la verdad.

[caricatos]

Hola:

Lamentablemente con javascript no puedes hacerlo, al menos que sirva en todos los navegadores...

Con explorer debes anteponerle a la imagen del cliente el protocolo "file:///", y de esa manera la puedes cargar y puedes consultar su tamaño con el atributo filezise, pero eso no vale en otros navegadores... de todos modos es más fiable realizar ese control con un lenguaje del servidor.

Saludos

[pempas]

Ok, muchas gracias, a ver si para esto hay solución que con eso me conformaría...

¿Se puede aunque sea precargar la imagen antes de subirla asignándole un ancho y alto calculado?, cuando le doy al botón de examinar y la escojo...

Es que antes de subirla me gustaría que el usuario la pudiese ver, muchas gracias de todos modos.

[sqa212]

Mira si esto te puede ayudar:

http://www.htmlcodetutorial.com/form...msupp_106.html