Custom image upload and preview inside the button

Customizing HTML file upload button is not always easy. Here is a way to create a custom image upload button (custom file upload button) with CSS Javascript and Jquery and preview the uploaded image instead of the image we used for the custom button. 

HTML

<div class="image-upload">
    <label for="file-input">
        <img src="http://goo.gl/pB9rpQ" id="blah" />
    </label>
    <input id="file-input" type="file"/>
</div>

CSS

.image-upload > input
{
    display: none;
}
.image-upload img
{
    width: 80px;
    cursor: pointer;
}

Javascript

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#file-input").change(function() {
  readURL(this);
});