Subir imágenes y crear vista previa

[kannonnr]

Hola a Todos y desde ya muchas gracias por si ayuda.

Estoy trabajando en un formulario para ingresar Pj. un estudiante y sus datos correspondientes a una BD, en este formulario me gustaría tener un recuadro donde aparezca una imagen por defecto como sale en facebook cuando creas tu cuenta pero no has subido alguna foto, pero junto a un botón en el cual puedes escoger un archivo de la pc( imagen obviamente ), y donde estaba la imagen por defecto se genere una vista previa de la imagen que hemos escogido desde nuestro ordenador, a continuación les mostrare un pantallazo del form:

https://twitter.com/#!/BosatzuK/stat...745536/photo/1

Muchas gracias.

[caricatos]

Hola:

Te cuento como se hace:

La imagen podría ser un control de un formulario aparte y que al seleccionar un archivo se envíe hacia un iframe oculto para que procese el formulario... o sea el fichero seleccionado (Para adjuntar ficheros el form debe tener el método post y el enctype="multipart/form-data"... lo de enviarlo a un iframe se consigue haciendo coincidir el target del form al name del iframe...

Luego viene la parte del servidor donde en principio debe chequearse el mime-type del fichero subido para comprobra si es una imagen, entonces reservarla (guardándola en una carpeta o en alguna tabla de la base de datos (que supongo usarás)...

Si todo va bien debe comunicarse a la página principal generando una respuesta javascript, que podría ser la id del fichero subido o una url de la imagen (eso debes pensártelo)... y modificar el src de la imagen...

Una referencia: Revisar las imágenes antes de subirlas.

Saludos

[elarrieux]

Hola!

Otra opcion:

http://www.zurb.com/playground/ajax_upload

Sds.

[caricatos]

Hola:

Iniciado por elarrieux

...Otra opcion...

Aunque pienses que se trate de otra opción, en primer lugar con los objetos Ajax normales (XMLHttpRequest) no es posible adjuntar ficheros entre otras cosas porque no admiten el tipo de datos adecuado (enctype)... y si aseguran que es Ajax, es porque se admite como Ajax el envío de datos a un iframe oculto como indico en mi respuesta. O sea que cualquier respuesta que parezca una alternativa (otra opción), no es más que una variación de lo que antes he comentado... en resúmen, no es necesario cargar toda una librería para el cometido de la pregunta.

Saludos

[elarrieux]

Si miras el ejemplo veras que el ajax lo usa para ejecutar el action de un form y cargar un thumbnail de la imagen el cual es devuelto por el servidor.

No usa iframes ocultos por lo cual es distinto a tu opcion y por tanto me parece que tambien es valida.

Sds.

[elarrieux]

Si miras el ejemplo veras que el ajax lo usa para ejecutar el action de un form y cargar un thumbnail de la imagen el cual es devuelto por el servidor.

No usa iframes ocultos por lo cual es distinto a tu opcion y por tanto me parece que tambien es valida.

Sds.

[caricatos]

Hola:

Bueno, puedes creerte lo que quieras, pero es un tema más que tratado en estos foros, y la respuesta ya la he comentado...
Perdona que no revise el código, porque entre otras cosas, puede haber muy poca diferencia con lo que ya conté.

Si se ejecuta el action y no se sale de la página, sí o sí se usan ventanas (ocultas o no)

Insisto en que no te fíes de las apariencias, y si quieres indagar en el código, comprobarás lo que te cuento...

Saludos

[kannonnr]

Implemente el código de la siguiente manera: http://www.mediafire.com/?mjuu5qqccp096g7

En ese archivo esta el proyecto que estoy realizando, el problema es que carga la imagen por defecto y al momento de seleccionar una imagen no crea la vista previa de dicha imagen y solo se queda la imagen por defecto.

Agradecería mucho su ayuda