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).