Preview images before uploading on server using jquery

in most cases we need to view image before uploading to server. this article will show you how to preview image before uploading to server.

html mark-up code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="file" name="filephoto" value="" id="filephoto" class="required borrowerimagefile" data-errormsg="photouploaderrormsg">
<img id="previewholder" alt="uploaded image preview holder" width="250px" height="250px"/>

jquery code

function readurl(input) {
  if (input.files && input.files[0]) {
    var reader = new filereader();
    reader.onload = function(e) {
      $('#previewholder').attr('src', e.target.result);
    }

    reader.readasdataurl(input.files[0]);
  }
}

$("#filephoto").change(function() {
  readurl(this);
});