Image removing/covering all the controls on the page

Question

So I've got this asp fileupload control which I'm using to select an image. The image is then saved in a temporary folder called "TempImages", then I'm pulling it from there and displaying it on the page, using the code shown below.

    protected void Close_Click(object sender, EventArgs e)
    {
        Div1.Visible = false;
    }
    #endregion Submit button

    protected void LogoToUpload_Click(object sender, EventArgs e)
    {

        if (upldLogo.HasFile)
        {
            upldLogo.SaveAs("C:\\TempImages\\" + upldLogo.FileName);
            Response.ContentType = "image/jpeg";
            string physicalFileName = @"C:\TempImages\" + upldLogo.FileName;
            Response.WriteFile(physicalFileName);
        }

My problem is that When the image is displayed, it gets rid of all the other controls, ie the dropdowns, the textboxs and the labels and all that jazz.

Anyone got any suggestions on how I can make the image just show either in a pop up or just display on the same page but with all the controls still there.

Cheers folks

Answer 1

Ok, so I managed to sort this out by using a little Javascript I put this into the head tag on the controls page.

            <script type="text/javascript">
    function previewFile() {
        var preview = document.querySelector('#<%=imgLogo.ClientID %>');
        var file = document.querySelector('#<%=upldLogo.ClientID %>').files[0];
        var reader = new FileReader();

        reader.onloadend = function () {
            preview.src = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }
</script>

aaaand this into the content. This served to create a little preview of the picture next to the file upload control once you selected a file.

Cheers!

<input ID="upldLogo" type ="file" onchange="previewFile()" runat="server" />