HTML5 File Api- Preview during image upload

File Api is one of the coolest addition with HTML5, though not all major browsers has started supported this(as of this writing). It allows the client to handle basic file validations and image preview before sending it to the server. Here's how I did:

HTML:

<input type="file" name="photo" accept="image/*"  />

<div class="preview"></div>

Jquery:


var MAX_FILE_SIZE = 5242880; // 5MB
var ACCEPT_FILE_TYPE = /image\/(jpg|jpeg|png)/i;

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  var form = $(evt.target).closest('form');

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {
    // Only process image files.
    if (!f.type.match(ACCEPT_FILE_TYPE)) {
      showFormError('File is not an image', form);
      continue;
    }

    if (parseInt(f.size) > MAX_FILE_SIZE) {
      showFormError('File size exceeds 5MB.', form);
      continue;
    }

    var reader = new FileReader();
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var img = ['<img src="', e.target.result,
                          '" title="', theFile.name, '"/>'].join('');
        form.find('.preview').prepend(img);
        form.find('.preview').show();
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}

function showFormError(msg, form) {
  var errorDiv = document.createElement('div');
  errorDiv.className = 'errors';
  errorDiv.innerHTML = msg;
  form.find('div.errors').remove();
  form.prepend(errorDiv);
}

$('input[type=file]').change(handleFileSelect);

That's it...