Form: Adding an image preview box with a browse button
I am creating a form that needs to have the user upload an image using the browse button, and after successfully selecting their image (at a specific size), that image is previewed "live" on the form for the user to see in a rectangular box.
To get a better understand of this.... the form asks a user to fill out their bio info...and if they have children. Let's say in this case, they have 6 kids, so the form needs to have 6 upload/browse image buttons, each with its own image box to preview a mugshot photo of each children they have. So this would likely be part of an array as the user keeps "adding" a new child, so this entire upload/browse button/preview box elements would need to be cloned.
My main concern really is not so much the cloning object part or dealing with the multiple arrays, but actually getting the browse button and image view box to work simultaneously. What would I need to know to get this to work the way I just explained it?
Any examples of code would very much be appreciated.
Thanks in advance.
There is only one way to make this Live preview really work as live and it's HTML5 File API (easy to google)
Using this API you have an instant access to file, and you can then print it in correct place,
Other solution - not so "live" is upload file once user choose it, and after uploading create an img tag in correct place on your form
Hope that help somehow
one simple method that doesn't need jQuery or server-side bloat:
<input type=file accept="image/*"
Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com
Thanks for the great answers. Will look into these.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)