xhgnoq
Last Updated: May 19, 2017
·
575
· bigbluehat
5a763117121668ba14c693f0abd55d4a

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.

Say Thanks
Respond

2 Responses
Add your response

26624
Sarven capadisli 5

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 ·
26625
5a763117121668ba14c693f0abd55d4a

Yeah. Wouldn't that be nice!

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

over 1 year ago ·