About Plugin:

The Plugin helps to preview the image uploaded by user. Apart from preview we can also restrict the size, dimension of image uploaded by user. The dimension can be specified during initialization as options, the user needs to upload the image with exact same width & height. Different demos are available along with corresponding HTML, CSS & JS code you can check it and copy the code accordingly.

Usage:

Choose the demo as per your requirement and then copy the HTML, CSS & JS code of that demo in your local machine and run the code. The JS code requires jQuery. Diferent options can be passed during initialization in the JS code as shown below. 

              $('body').on("change", "#my-profile-file-selector", function(){
                // Pass the options as object parameter
                checkProfileSize({
                  size: 200     // always in KB, can be null
                  width: 1280   // always in px, can be null
                  height: 720   // always in px, can be null
                });
              })

Demo1 - Simple Image Preview

Select Image

html code

Copy 
<form action="#" method="post" id="demo1-form">
  <label class="btn profile" for="my-profile-file-selector">
  <input id="my-profile-file-selector" type="file">Upload
  </label>
  <span class='' id="upload-profile-file-info"></span>
  <h4 id="upload-profile-error" class="text-danger"></h4>
  <img id="upload-profile-image" src="" class="img-responsive" alt="">
  <button class="btn" id="remove-profile-btn">Remove</button>
</form>

css code

Copy 
.btn{
  padding: 8px 34px;
  background-color: #9c27b0; color: #fff;
  font-size: 16px; border-radius: 0;
}
.btn:hover{
  color: #fff !important;
}              
#remove-profile-btn{ 
  display: none;
  margin-top: 12px;
}
#my-profile-file-selector{
  display: none;
}

JavaScript code

Copy 
$(function(){
  // Initialization code
  $('body').on("change", "#my-profile-file-selector", function(){
    checkProfileSize();
  })
  // When Remove button clicked
  $('#remove-profile-btn').on('click', function(event) {
        event.preventDefault();
        // make image view empty
        $('#upload-profile-image').attr('src', '');
        // make file name empty
        $('#upload-profile-file-info').html('');
        // make input file value empty
        $('input#my-profile-file-selector[type=file]').val('')
        // remove hide button
        $('#remove-profile-btn').hide();
        // show upload button again
        $('label.profile').show();
    });
});
// Function that executes all options
function checkProfileSize(arg){
    arg = arg || {};
    $('#upload-profile-image').attr('src', '');
    $('#upload-profile-file-info').html('');
    $('#upload-profile-error').html('');
    var fileInput = $('form').find("input#my-profile-file-selector[type=file]")[0],
    file = fileInput.files && fileInput.files[0];
    var sizeKB = file.size / 1024;
    var tmppath = URL.createObjectURL(event.target.files[0]);
    var maxSize = arg.size || sizeKB;
    var imgHeight, imgWidth;
    if( file ) {
        var img = new Image();
        img.src = window.URL.createObjectURL( file );
        img.onload = function() {
            var width = img.naturalWidth, height = img.naturalHeight;
            window.URL.revokeObjectURL( img.src );
            imgWidth = arg.width || width;
            imgHeight = arg.height || height;
            if( sizeKB <= maxSize) {
              if( width == imgWidth && height == imgHeight){
                var fileName = $('input#my-profile-file-selector[type=file]').val();
                  fileName = fileName.substr(fileName.lastIndexOf("\\")+1);
                  $('#upload-profile-image').attr('src', tmppath);
                  $('#upload-profile-file-info').html(fileName);
                  $('label.profile').hide();
                  $('#remove-profile-btn').show();
              }
              else{
                  imgWidth = arg.width || "any";
                  imgHeight = arg.height || "any";
                  $('#upload-profile-error')
                  .html('Uploaded Picture Width should be '+ imgWidth+' and Height should be '+imgHeight);
                  var fileName = $('input#my-profile-file-selector[type=file]').val();
              }
            }
            else {
                $('#upload-profile-error').html('Uploaded Profile picture size should be less than '+maxSize+'KB');
                var fileName = $('input#my-profile-file-selector[type=file]').val();
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        console.log('No file selected');
    }
}

Demo2 - Image Preview with Size restriction

Select Image

html code

Copy 
<form action="#" method="post" id="demo1-form">
  <label class="btn profile" for="my-profile-file-selector">
  <input id="my-profile-file-selector" type="file">Upload
  </label>
  <span class='' id="upload-profile-file-info"></span>
  <h4 id="upload-profile-error" class="text-danger"></h4>
  <img id="upload-profile-image" src="" class="img-responsive" alt="">
  <button class="btn" id="remove-profile-btn">Remove</button>
</form>

css code

Copy 
.btn{
  padding: 8px 34px;
  background-color: #9c27b0; color: #fff;
  font-size: 16px; border-radius: 0;
}
.btn:hover{
  color: #fff !important;
}              
#remove-profile-btn{ 
  display: none;
  margin-top: 12px;
}
#my-profile-file-selector{
  display: none;
}

JavaScript code

Copy 
$(function(){
  // Initialization code with Size Parameter
  $('body').on("change", "#my-profile-file-selector", function(){
    checkProfileSize({
        size: 200
    });
  })
  // When Remove button clicked
  $('#remove-profile-btn').on('click', function(event) {
        event.preventDefault();
        // make image view empty
        $('#upload-profile-image').attr('src', '');
        // make file name empty
        $('#upload-profile-file-info').html('');
        // make input file value empty
        $('input#my-profile-file-selector[type=file]').val('')
        // remove hide button
        $('#remove-profile-btn').hide();
        // show upload button again
        $('label.profile').show();
    });
});
// Function that executes all options
function checkProfileSize(arg){
    arg = arg || {};
    $('#upload-profile-image').attr('src', '');
    $('#upload-profile-file-info').html('');
    $('#upload-profile-error').html('');
    var fileInput = $('form').find("input#my-profile-file-selector[type=file]")[0],
    file = fileInput.files && fileInput.files[0];
    var sizeKB = file.size / 1024;
    var tmppath = URL.createObjectURL(event.target.files[0]);
    var maxSize = arg.size || sizeKB;
    var imgHeight, imgWidth;
    if( file ) {
        var img = new Image();
        img.src = window.URL.createObjectURL( file );
        img.onload = function() {
            var width = img.naturalWidth, height = img.naturalHeight;
            window.URL.revokeObjectURL( img.src );
            imgWidth = arg.width || width;
            imgHeight = arg.height || height;
            if( sizeKB <= maxSize) {
              if( width == imgWidth && height == imgHeight){
                var fileName = $('input#my-profile-file-selector[type=file]').val();
                  fileName = fileName.substr(fileName.lastIndexOf("\\")+1);
                  $('#upload-profile-image').attr('src', tmppath);
                  $('#upload-profile-file-info').html(fileName);
                  $('label.profile').hide();
                  $('#remove-profile-btn').show();
              }
              else{
                  imgWidth = arg.width || "any";
                  imgHeight = arg.height || "any";
                  $('#upload-profile-error')
                  .html('Uploaded Picture Width should be '+ imgWidth+' and Height should be '+imgHeight);
                  var fileName = $('input#my-profile-file-selector[type=file]').val();
              }
            }
            else {
                $('#upload-profile-error').html('Uploaded Profile picture size should be less than '+maxSize+'KB');
                var fileName = $('input#my-profile-file-selector[type=file]').val();
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        console.log('No file selected');
    }
}

Demo3 - Image Preview with Dimension restriction

Select Image

html code

Copy 
<form action="#" method="post" id="demo1-form">
  <label class="btn profile" for="my-profile-file-selector">
  <input id="my-profile-file-selector" type="file">Upload
  </label>
  <span class='' id="upload-profile-file-info"></span>
  <h4 id="upload-profile-error" class="text-danger"></h4>
  <img id="upload-profile-image" src="" class="img-responsive" alt="">
  <button class="btn" id="remove-profile-btn">Remove</button>
</form>

css code

Copy 
.btn{
  padding: 8px 34px;
  background-color: #9c27b0; color: #fff;
  font-size: 16px; border-radius: 0;
}
.btn:hover{
  color: #fff !important;
}              
#remove-profile-btn{ 
  display: none;
  margin-top: 12px;
}
#my-profile-file-selector{
  display: none;
}

JavaScript code

Copy 
$(function(){
  // Initialization code with Width, Height Parameter
  $('body').on("change", "#my-profile-file-selector", function(){
    checkProfileSize({
        width: 1280,
        height: 720
    });
  })
  // When Remove button clicked
  $('#remove-profile-btn').on('click', function(event) {
        event.preventDefault();
        // make image view empty
        $('#upload-profile-image').attr('src', '');
        // make file name empty
        $('#upload-profile-file-info').html('');
        // make input file value empty
        $('input#my-profile-file-selector[type=file]').val('')
        // remove hide button
        $('#remove-profile-btn').hide();
        // show upload button again
        $('label.profile').show();
    });
});
// Function that executes all options
function checkProfileSize(arg){
    arg = arg || {};
    $('#upload-profile-image').attr('src', '');
    $('#upload-profile-file-info').html('');
    $('#upload-profile-error').html('');
    var fileInput = $('form').find("input#my-profile-file-selector[type=file]")[0],
    file = fileInput.files && fileInput.files[0];
    var sizeKB = file.size / 1024;
    var tmppath = URL.createObjectURL(event.target.files[0]);
    var maxSize = arg.size || sizeKB;
    var imgHeight, imgWidth;
    if( file ) {
        var img = new Image();
        img.src = window.URL.createObjectURL( file );
        img.onload = function() {
            var width = img.naturalWidth, height = img.naturalHeight;
            window.URL.revokeObjectURL( img.src );
            imgWidth = arg.width || width;
            imgHeight = arg.height || height;
            if( sizeKB <= maxSize) {
              if( width == imgWidth && height == imgHeight){
                var fileName = $('input#my-profile-file-selector[type=file]').val();
                  fileName = fileName.substr(fileName.lastIndexOf("\\")+1);
                  $('#upload-profile-image').attr('src', tmppath);
                  $('#upload-profile-file-info').html(fileName);
                  $('label.profile').hide();
                  $('#remove-profile-btn').show();
              }
              else{
                  imgWidth = arg.width || "any";
                  imgHeight = arg.height || "any";
                  $('#upload-profile-error')
                  .html('Uploaded Picture Width should be '+ imgWidth+' and Height should be '+imgHeight);
                  var fileName = $('input#my-profile-file-selector[type=file]').val();
              }
            }
            else {
                $('#upload-profile-error').html('Uploaded Profile picture size should be less than '+maxSize+'KB');
                var fileName = $('input#my-profile-file-selector[type=file]').val();
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        console.log('No file selected');
    }
}