html5 input file img,javascript - Loading an image to a <img> from <input file> - Stack Overflow

Andy E is correct that there is no HTML-based way to do this*; but if you are willing to use Flash, you can do it. The following works reliably on systems that have Flash installed. If your app needs to work on iPhone, then of course you'll need a fallback HTML-based solution.

* (Update 4/22/2013: HTML does now support this, in HTML5. See the other answers.)

Flash uploading also has other advantages -- Flash gives you the ability to show a progress bar as the upload of a large file progresses. (I'm pretty sure that's how Gmail does it, by using Flash behind the scenes, although I may be wrong about that.)

Here is a sample Flex 4 app that allows the user to pick a file, and then displays it:

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

creationComplete="init()">

private var fr:FileReference = new FileReference();

// Called when the app starts.

private function init():void

{

// Set up event handlers.

fr.addEventListener(Event.SELECT, onSelect);

fr.addEventListener(Event.COMPLETE, onComplete);

}

// Called when the user clicks "Choose file..."

private function showFilePicker():void

{

fr.browse();

}

// Called when fr.browse() dispatches Event.SELECT to indicate

// that the user has picked a file.

private function onSelect(e:Event):void

{

fr.load(); // start reading the file

}

// Called when fr.load() dispatches Event.COMPLETE to indicate

// that the file has finished loading.

private function onComplete(e:Event):void

{

myImage.data = fr.data; // load the file's data into the Image

}

]]>