taking an input img type selected picture and load into an image tag

Question

So, i have an input box for doing a img file upload. What i was wanting to do is take the data from that (or the selected source) and route that into the src attribute of an image tag. something like this: http://jsfiddle.net/QC2c4/ It is sort of going to be a client side verifier to show what the user is going to upload. I know that i am going to need to check the extension for the valid img types, .png, .bmp, .png, .tiff, etc, etc. How would i go about the linking process?

Accepted Answer

Here's the answer, and as an added bonus I loaded the image into the preview pane for ya. The key is pulling the `files[0]` object from the file picker on change.

http://jsfiddle.net/TbZzH/1/

taking an input img type selected picture and load into an image tag

Solution

Problem