How to display Preview of an image before upload in Asp.Net

See more:

ASP.NET

Javascript

C#3.5

Hi

I am using FileUpload control to upload an image. I am displaying preview of an image when user select an image. I have used following javascript function to display it.

function previewImage(input, elem) {
            //alert(input.files.length)
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#' + elem).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

The above script works fine before postback occurs on the page and preview is available. but when post back occurs FileUpload loses its value. To avoid it I have handle it by using solution given in following post
How to Maintain FileUpload Control’s State after PostBack[^]

The above solution works and fileupload retains its value after postback. But Preview is not working after postback. I am calling the javascript function using following code

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "PreView", "previewImage(" + fu.ID + "," + imgid + ");", true);

the function gets called but it is not able to get files. When I tried to get file length it shows 0. What went wrong? How can I resolved this ?