View Full Version : Input type = file question

Apr 4th, 2012, 02:31 PM

I have a <input type="File"> in my html, I need it because the user can select a jpg image and when they click submit it will post that image to a webservice.

My question... Is their a way to load the file they selected so that I can draw it on a canvas? Sounds simple but I cannot figure it out!

Thanks in advance

Apr 4th, 2012, 02:49 PM
"in theory" you should be able to upload the file using AJAX and when the upload is complete, the onreadystatechange event handler should be able to display the image on your page.

Apr 4th, 2012, 02:55 PM
File upload using Ajax can be done using "XMLHttpRequest level 2" which is not supported by all modern browsers yet.

For all other browsers you need to find a workaround

1. Usual file upload which will result in a page refresh
2. Usual file upload with a specific target attribut which will target an iframe (mostly you will have it invisible) and only refresh that iframe
3. Flash based solutions which will also allow to show an upload progress bar

If you don't want to upload but instead just open the file locally, you'll need the File API which is (surprise surprise) also not available in all modern browsers. See example here: http://stackoverflow.com/questions/6775767/how-can-i-draw-an-image-from-the-html5-file-api-on-canvas

rnd me
Apr 4th, 2012, 05:37 PM
use the File, Blob, or URL apis to display image data in a canvas or IMG tag.