As you seen above, we captured the targeted file upload via the parameters ‘evt‘ sent from event listener that we defined earlier, and accessing the information of targeted images via FileReader, and lastly calls reader.readAsDataURL() render the image into thumbnail by setting the ‘src’ attribute to a data URL.

I am getting Uncaght Type Error: Cannot call method ‘addEventListener’ of null, i copy exactly what you do! Is there any js extra??

http://www.onlywebpro.com onlyWebPro

Hi Noe,

Thanks for reading my post

For your problem, I guess it is because the script runs before the before the output elements are rendered, so please make sure you have:

- Put the scripts in the bottom of the page / After “”.

Andrew

I’ve combined your great work above with “jquery.fileinput.js” – they make a great combination. Thank you!

http://www.onlywebpro.com onlyWebPro

Hi Andrew,

Glad to heard that!

Regards,
onlywebpro

John

Andrew. I’m looking for a similar solution that styles the file input and also displays a thumbnail. Do you have a demo?

http://www.facebook.com/mohamad.habibi Mohamad Habibi

A great resource indeed ! I’d like to know how to perform real upload to server after this ? Thank you

http://www.facebook.com/travdahl Travis Dahl

This is great! I have it working on a iphone web app. The only problem I’ve encountered is the orientation. it doesnt seem to rotate it correctly based on exif data. Anybody run into this? They always preview landscape even if they were taken in portrait

Nikhil

nice info…

here i found one more post which creates thumbnail. and only thumbnail is gets shown or saved when we try to save or view it..