Use FileReader to preview an image file

This shows you how to take the contents of a selected image file and display it on change within the page.

by Joe Steinbring

HTML

<!-- We are going to display it in an <img> tag, so we will only accept image files -->
<input type='file' accept='images/*' onchange='openFile(event);'>
<div id="TheImageContents">
	
</div>

JavaScript

// This grabs the file contents when the file changes
var openFile = function(event) {
	var input = event.target;

	// Instantiate FileReader
	var reader = new FileReader();
	reader.onload = function(){
		TheFileContents = reader.result;
		// Update the output to include the <img> tag with the data URL as the source
		document.getElementById("TheImageContents").innerHTML = '<h2>The image that you selected</h2><p><img width="200" src="'+TheFileContents+'" /></p>';
	};
	// Produce a data URL (base64 encoded string of the data in the file)
	// We are retrieving the first file from the FileList object
	reader.readAsDataURL(input.files[0]);
};