Skip to content

Instantly share code, notes, and snippets.

@steinbring steinbring/index.html
Last active Aug 29, 2015

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
You can’t perform that action at this time.