Sometimes we need to preview images before uploading, As there are many JavaScript libraries like ajaxuploader to make this possible.There are time when we didn’t want to upload the files via AJAX. In that case we can do it using simple JavaScript code.Below is the code to upload image with preview

<div class="upload">
    <div id="preview"></div>
    <label>Select a File:</label>
    <input type="file" name="file" id="file">
</div>

$(function(){
  $("#file").change(function(){
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#preview').html('<img src="'+e.target.result+'" />');
        }

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

Hope everyone get how to upload image with preview