If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Form: Adding an image preview box with a browse button

Hi there, I'm new here and new to javascript, so bare with me on my question.

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.

Can this be done in javascript only? JQuery even? Or does this require a combination of the two, along with other front-end/object-oriented languages to get this to work?

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?