Instantly share code, notes, and snippets.

What would you like to do?
This shows you how to take the contents of a selected image file and display it on change within the page.
<!DOCTYPE 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">
<script type="text/javascript">
// This grabs the file contents when the file changes
var openFile = function(event) {
var input =;
// 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment