How to have a image preview in the light box for before uploading in the form

I am uploading images using the form however i wanted to see the preview of the image while uploading it.

I was able to achieve using that using jquery render, but the image sizes are small and i cannot display the whole image of its size on the page. So i thought of using lightbox.

I am using lightcase javascript library. When i use the below javascript code, I am getting 404 error in the popup where the image has to be loaded.

//HTML file
<a id="questionImage" data-rel="lightcase">Preview</a>

//Jquery
$('body').on('change', '.imagepreview', function() {
    $imageid = $(this).attr('data-img');
    if (this.files && this.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
    // var image = new Image();
    // image.src = e.target.result;
      $("#"+$imageid).attr('href', e.target.result);
    };
    reader.readAsDataURL(this.files[0]);
  }
});

can anyone suggest what is the better approach for this?

Regards, Feroz.