www.webdeveloper.com
Results 1 to 5 of 5

Thread: Form: Adding an image preview box with a browse button

  1. #1
    Join Date
    Apr 2013
    Posts
    4

    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?

    Any examples of code would very much be appreciated.

    Thanks in advance.

  2. #2
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    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
    Javascript, jQuery / Prototype & PHP expert ready to complete your work on Freelancer.co.uk - Hire Me at https://www.freelancer.co.uk/users/1...&action=hireme

  3. #3
    Join Date
    Oct 2012
    Posts
    41

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    one simple method that doesn't need jQuery or server-side bloat:

    Code:
    <input type=file accept="image/*"
      onchange="img.src= URL.createObjectURL(this.files[0])">
    
    
    <img id=img>

  5. #5
    Join Date
    Apr 2013
    Posts
    4
    Hi guys,

    Thanks for the great answers. Will look into these.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles