There are tons of different solutions out there to achieve this. Specially using jQuery.
Your are filling up a form, upload a picture and, there it is: a preview of the file before submitting it. Simple!
This week I had to implement that in one of the project I’m working on. I found a lot of jQuery plugins, really nice and all working in their demo pages. But when trying to integrate it to the work I already had, it was a bit painful.
I have to admit that was probably me and the urgency of having the work done. So I decided to implement it by myself and share the idea here (Please note this is just the idea of what I consider will be a simple solution to have the work done)
It consists in the following steps:
- Having two different forms (but transparent to the user). One to submit the image and the other one to submit the rest of the data.
- When submitting the image, save a copy in the server and return path to display a preview image.
- Add a clear functionality to remove that image from the server (not on this example).
- Validate and submit the rest of the data (not on this example).
On this demo I’m using one of the best form jQuery plugins out there to help me out with the submission process.
Check out the two versions of the demo here or download the code from Github:
Hola Silvia… Muchas gracias por compartir esta valiosa solución. No tenía idea de como capturar cambios en el input->file, ahora con este ejemplo voy a poder avanzar. Nuevamente Mil gracias.
Hola Juan Eduardo
me alegro que te haya ayudado! saludos!
A way to do this is to use an iframe. Here is an article covering this: http://tech.cibul.net/upload-and-display-an-image-without-a-page-refresh/