Adding an preview box with a browse button

[1devlady]

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.

 

[vacunita]

The first thing to know would be that the preview cannot be done live. The Reason for this is that the file form element is secured by the browsers so there's no direct access to the selected file's full path to be able to actually preview it.

If you try to access the file elements in most browsers you'll get values like: C:\fakepath\image.jpg

Yes they actually use the string "fakepath" as part of the path. So you don't really know where the file resides.

To do what you want you'll need to actually upload the selected images on the spot so you can then show them. to keep the form without having to submit and have the page change, Ajax would be your best bet.

Using Ajax you can upload the pictures on the spot without submitting the rest of the form, and then you can display them.
You will of course need a server side script be it ASP, PHP, etc.. to process the images and place them in a folder you can access on your server to preview the pics.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[1devlady]

Hello,

Thank you for the point in the right direction. I will continue to do more research on this.