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.