View code:

<div>
    <input id="fileupload" type="file" onchange="FileUploadChange(this);" />
    <hr />
    <b>Live Thumbnail</b>
    <br />
    <div id="dvThumbnail" style="width:80px; height:80px;">
        Thumbnail
    </div>
    <br /> 
    <b>Live Preview</b>
    <div id="dvPreview">
    </div> 
</div>

javascrpt:

    <script>
        function FileUploadChange(obj){
            document.getElementById("dvPreview").innerHTML = "";
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            if (regex.test(obj.value.toLowerCase())) {
                if (typeof (FileReader) != "undefined") {

                    var reader = new FileReader();
                    reader.onload = function (e) { 
                        //set the Thumbnail
                        var thumbnailElement = document.getElementById("dvThumbnail"); 
                        thumbnailElement.style.backgroundImage = `url('${reader.result}')`;


                        //add a img element to preview the image.
                        document.getElementById("dvPreview").innerHTML += "<img id='image1'/>";

                        //set the preview
                        var previewElement = document.getElementById("image1"); 
                        previewElement.src =  e.target.result;

                        //$("#dvThumbnail").css("background-image", `url('${reader.result}')`); //set the Thumbnail
                        //$("#dvPreview img").attr("src", e.target.result);     //set the preview
                    };
                    reader.readAsDataURL(obj.files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            } else {
                alert("Please upload a valid image file.");
            }
        };