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?

Any examples of code would very much be appreciated.

Thanks in advance.