Last Updated: January 05, 2019
· bigbluehat

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.


2 Responses
Add your response


Nice. I suppose with some fragment selection, the user can even crop and send only what's of interest to the server.

over 1 year ago ·

Yeah. Wouldn't that be nice!

Browser would have to start caring about such things, though...

over 1 year ago ·