Foros del Web » Programando para Internet » Javascript »

Java script para previsualizar imagenes

Estas en el tema de Java script para previsualizar imagenes en el foro de Javascript en Foros del Web. 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 ...
  #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!.
  #2 (permalink)  
Antiguo 16/11/2012, 12:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años
Puntos: 1567
Respuesta: Java script para previsualizar imagenes

HTML 5 incorporó la API file, ejemplo
http://blueimp.github.com/jQuery-File-Upload/
También hay muchos plugins de Jquery que hacen algo similar, pero lamentablemente este método no es soportado entre otros, por IE.
Algunos han decidido dejar fuera IE y hacer el preview sólo en el resto, pero yo no comparto dicha solución.
Para hacer algo compatible tenés esto, que ha realizado nuestro colega @Caricatos
http://www.caricatos.net/articulos/check_form.html
El código fuente puede ser descargado desde
http://www.caricatos.net/articulos/check_form.zip
Más detalles en
http://www.maestrosdelweb.com/editor...s-de-subirlas/

Te advierto que la imagen debe ser subida al server, podés ahorrarte el move_uploaded_file y trabajar con al archivo temporal, pero es subida

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 16/11/2012, 12:39
valago
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Java script para previsualizar imagenes

Muchas gracias por tu respuesta!! Voy a echarle un vistazo y te comento como me ha ido. Si puedo adaptarlo a lo que me hace falta.

Etiquetas: formulario, imagenes, input, java, php, previsualizar, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:22.