Simple Validation and Preview for Image Upload (JavaScript)

simple-image-upload.js

var _URL = window.URL || window.webkitURL;

$("#article_image").change(function(){
  var file, img, reader;
  if ((file = this.files[0])) {
    img = new Image();
    img.onload = function(){
      if ( (this.width < 960) || (this.height < 300) ) {
        alert("Image must be larger than 960x300 pixels!")
      } else {
        reader = new FileReader();
        reader.onload = function (e) {
          $('#image-preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
    img.src = _URL.createObjectURL(file);
  }
});

What this codes do? It's listen to file input (#article_image) on event changes.

If the image size is valid, the image will be shown/displayed on image tag (#image-preview), else it will showing alert message.