HTML input type=file, get the image before submitting the form

Here is the complete example for previewing image before it gets upload.

HTML :

<html><head><link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /><script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script><meta charset=utf-8 /><title>JS Bin</title><!--[if IE]><script src="http://goo.gl/r57ze"></script><![endif]--></head><body><input type='file' onchange="readURL(this);" /><img id="blah" src="#" alt="your image" /></body></html>

JavaScript :

function readURL(input) {  if (input.files && input.files[0]) {    var reader = new FileReader();    reader.onload = function (e) {      $('#blah')        .attr('src', e.target.result)        .width(150)        .height(200);    };    reader.readAsDataURL(input.files[0]);  }}

javascript html forms file-io

I found This simpler yet powerful tutorial which uses the fileReader Object. It simply creates an img element and, using the fileReader object, assigns its source attribute as the value of the form input

function previewFile() {  var preview = document.querySelector('img');  var file    = document.querySelector('input[type=file]').files[0];  var reader  = new FileReader();  reader.onloadend = function () {    preview.src = reader.result;  }  if (file) {    reader.readAsDataURL(file);  } else {    preview.src = "";  }}

<input type="file" onchange="previewFile()"><br><img src="" height="200" alt="Image preview...">

Expand snippet