Java script para previsualizar imagenes

[valago]

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:

<form class="form-horizontal" method="post" action="profile_photo.php" enctype="multipart/form-data">
                    <div class="control-group">
                        <div class="controls">
                            &nbsp;
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="gallery_neteye">User Photo</label>
                        <div class="controls">
                            <div id='gallery_neteye'>                            
                                <a href="<?php echo $photo ?>">
                                    <img src="<?php echo $photo ?>"/>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="upload"><input type="file" name="photo">Select</div>                        
                        <button type="submit" class="btn btn-primary">Change photo</button>
                    </div>
                </form>
 

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

Código Javascript:

<script type="text/javascript">
    $(function(){
        $('#gallery_neteye a').touchGallery({getSource: function() {
            var src = $(this).attr('href');
            if (320 > screen.availWidth) {
                src = src.replace('images', 'small');
            }
            return src;
        }});
    });
</script>
 

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

[emprear]

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

[valago]

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.