Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/11/2012, 10:18
valago
Invitado
 
Mensajes: n/a
Puntos:
Java script para previsualizar imagenes

Hola, les comento mi problema tengo un fomulario en php para cambiar una foto de un usuario, donde puede elegir la foto y despues cambiarla con otro boton.
Lo hace todo bien, pero me falta que cuando cargo la foto desde el input file antes de darle al boton para enviar el formulario, que me cambie la foto.
He estado probando con el atributo onchane en el input file, pero como tengo casi nulo conocimiento de javascript, no he conseguido hacerlo.

este es el formulario:

Código PHP:
Ver original
  1. <form class="form-horizontal" method="post" action="profile_photo.php" enctype="multipart/form-data">
  2.                     <div class="control-group">
  3.                         <div class="controls">
  4.                             &nbsp;
  5.                         </div>
  6.                     </div>
  7.                     <div class="control-group">
  8.                         <label class="control-label" for="gallery_neteye">User Photo</label>
  9.                         <div class="controls">
  10.                             <div id='gallery_neteye'>                            
  11.                                 <a href="<?php echo $photo ?>">
  12.                                     <img src="<?php echo $photo ?>"/>
  13.                                 </a>
  14.                             </div>
  15.                         </div>
  16.                     </div>
  17.                     <div class="form-actions">
  18.                         <div class="upload"><input type="file" name="photo">Select</div>                        
  19.                         <button type="submit" class="btn btn-primary">Change photo</button>
  20.                     </div>
  21.                 </form>


Utilizo este script que he encontrado para una vez que pincho en la imagen abrirla en grande:


Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     $(function(){
  3.         $('#gallery_neteye a').touchGallery({getSource: function() {
  4.             var src = $(this).attr('href');
  5.             if (320 > screen.availWidth) {
  6.                 src = src.replace('images', 'small');
  7.             }
  8.             return src;
  9.         }});
  10.     });
  11. </script>

Les agradecería muchísimo sus respuestas, ya que me urge solucionar este problema. Gracias de antemano y un saludo!.