These days, the lines between the web and the local environment can be very blurry. There is a web API called FileReader() that nicely adds to that blurriness. It lets you asynchronously read the contents of a file on the user’s computer. I am going to show you one way of using it.
So, what am I doing, here? There is an input tag that is set up to accept images. It triggers openFile() onChange. The openFile() function looks at the first (and only) file supplied and reads it as a data URL. The function then changes the innerHTML of the “TheImageContents” div to contain an img tag that uses the data URL as the source.
The code behind this demo is available on jsFiddle and Github Gist or you could just test the final result on jsFiddle.
