Image preview before upload file

We can preview the uploaded image easily with jQuery or JavaScript before actual upload of file.

Just Follow these Steps

HTML Code

<form id="Imgfrm">
   <input id="imgfile" type="file" /> 
   <img id="preview" src="#" alt="your image" /><
/form>

Then use following jQuery Code (You can use pure JavaScript also)

$("#imgfile").change(function(){
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
});

With pure javascript

<form id="Imgfrm">
   <input id="imgfile" type="file" onchange="readURL(this)"; /> 
   <img id="preview" src="#" alt="your image" /><
/form>

Then use following JS Code

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('preview').src=e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}