Conocer tamaño de imágen y asignar a campos de formulario

angel_dope · #1 (**permalink**) 16/05/2014, 05:53

Hola, necesito saber el tamaño de una imágen al subirla al servidor para usar esos valores más adelante. He encontrado este código y parece que funciona, aunque en realidad en el alert siempre me salen como valores 28 y 30, independientemente del tamaño de la imágen.

Código Javascript:

Ver original<html>
<head>
<script>
function CargaImagen() {
    var filename = document.form1.imagen.value;
    var Img = new Image();
    Img.src = filename;
    document.images[0].src = Img.src;
}
 
function ComprobarArchivo(){
    wth = document.images[0].width;
    hgt = document.images[0].height;
    if (document.form1.imagen.value=="") {
        alert('no has seleccionado ninguna imagen');
    }
    else {
        alert('Las medidas de la imagen son: Ancho='+wth+'Alto='+hgt);
        
    }
}
</script>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Upload de imágenes con validación de tamaño en el cliente</title>
</head>
<body>
<h4>UPLOAD DE IMÁGENES CON VALIDACIÓN DE TAMAÑO EN EL CLIENTE</h4>
<form method="POST" enctype="multipart/form-data" action="upload.asp" name="form1">
<input type="file" name="imagen" size="20" onchange="CargaImagen()">
<input name="Enviar" type="submit" onclick="ComprobarArchivo()" value="Enviar">
</form>
</body>
</html>

Pero es que además, lo he adaptado para que me asigne esos valores a dos campos hidden del formulario, pero pasa de mi, no hace nada en absoluto, ni saca el alert, ni asigna los valores... El código ha quedado tal que así:

Código Javascript:

Ver original<html>
<head>
<title>Insertar Archivo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function CargaImagen() {
    var filename = document.form1.fichero.value;
    var Img = new Image();
    Img.src = filename;
    document.images[0].src = Img.src;
}
 
function ComprobarArchivo(){
    wth = document.images[0].width;
    hgt = document.images[0].height;
    if (document.form1.imagen.value=="") {
        alert('no has seleccionado ninguna imagen');
    }
    else {
        alert('Las medidas de la imagen son: Ancho='+wth+' Alto='+hgt);
        document.form1.ancho.value=wth;
        document.form1.alto.value=hgt;
        document.form1.submit();
    }
}
</script>
 
</head>
 
<body bgcolor="#093969" link="#000000" vlink="#000000" alink="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center"> <font face="Arial, Helvetica, sans-serif" size="6,5" color="#FFFFFF"></font></div>
<form action="Subir_Fich.asp" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <div align="center"> 
    <table width="30%" border="0" align="center">
   
      <tr> 
        <td bgcolor="#093969"> 
          <div align="left"></div>          
          <div align="center">
            <input name="fichero" type="file" size="20" onchange="CargaImagen()">
            
            <input name="ancho" type="hidden" id="ancho">
            <input name="alto" type="hidden" id="alto">
          </div></td>
      </tr>
      <tr> 
        <td> 
          <div align="center"> 
            <input name="enviar" type="submit" id="enviar" value="Cambiar Imagen" onclick="ComprobarArchivo()">
            <br>
          </div>
        </td>
      </tr>
    </table>
  </div>
</form>
 
</body>
</html>

Alguien podría decirme porque no funciona, y que he de hacer para poder usarlo, por favor?? Muchas gracias por adelantado, salu2

Italico76 · #2 (**permalink**) 16/05/2014, 06:18

Código Javascript:

Ver originalImg.src = filename;

Puede tenga algun error pero no tiene sentido sigamos dandole vueltas al asunto porque NO VA A FUNCIONAR en Chrome por ejemplo debido a restricciones de seguridad para acceder al filesystem

Te comento: debes hacerlo todo del lado del servidor --quizas Ajax--

Mas aqui

angel_dope · #3 (**permalink**) 20/05/2014, 00:21

Pues que lástima :( Gracias por la respuesta

caricatos · #4 (**permalink**) 20/05/2014, 00:41

Hola:

No sé si actualmente hay solución (creo que sí), pero desde siempre ha sido necesario subir la imagen para obtener ese dato: Revisar las imágenes antes de subirlas.

Saludos