/    Sign up×
Community /Pin to ProfileBookmark

Form: Adding an image preview box with a browse button

Copy linkTweet thisAlerts:
Apr 25.2013

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.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@maurycyApr 25.2013 — 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
Copy linkTweet thisAlerts:
@rnd_meApr 25.2013 — one simple method that doesn't need jQuery or server-side bloat:

<i>
</i>&lt;input type=file accept="image/*"
onchange="img.src= URL.createObjectURL(this.files[0])"&gt;


&lt;img id=img&gt;


Copy linkTweet thisAlerts:
@webnkauthorApr 26.2013 — Hi guys,

Thanks for the great answers. Will look into these.
×

Success!

Help @webnk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...