Preview Images picked with a file input

A file picker form field and an image tag for the preview:

<input id="file" type="file" />
<img id="preview" />

Some tasty decaff JavaScript:

var file = document.getElementById('file');
var preview = document.getElementById('preview');

file.addEventListener('change', function() {  
  preview.src = URL.createObjectURL(this.files[0]);
}, false);

The result: <a href="http://jsbin.com/xobosacixa" target="_blank">http://jsbin.com/xobosacixa</a>

The image hasn't gone anywhere yet. It's sitting in your browser, waiting for you to submit the form.

Neat.