Image preview in browser after chosing file for upload

Discussion in 'JavaScript' started by PoPSiCLe, Mar 13, 2009.

  1. #1
    I have a webform where a user can chose a picture for uploading - the upload-part works just fine, with resizing etc. done by PHP.

    What I would like, though, is for the user to be able to see what picture he/she has chosen to upload, before sending it to the server / adding it to the database.

    What I have is this:

    A form which is meant to edit a user profile - the form has a preview of the current picture (or a default picture) and a "browse"-field for selecting a new picture.

    Then follows the rest of the form fields, name, title etc.

    On the bottom there is a submit-button, which, if pushed, uploads the image, adds it to the database, and updates all other fields.

    What I would like is for the image-part to change with whatever picture I've chosen to upload, but before I've actually pushed the button for submitting it, as I would like the user to have the means to reset the form if for some reason it's the wrong picture. I have reset-buttons in place that does this already - all I need is some js/ajax-code to preview the picture - anyone able to help? Please feel free to point me in the right direction - I don't know too much about javascript, but I can probably manage to customize a working script to my needs - I've just not been able to find any as of yet.

    Oh, yes - one requirement - it has to work in most browsers, at least newest versions of IE, FF and Opera.
     
    PoPSiCLe, Mar 13, 2009 IP