asyncfileupload show image after upload without refreshing the page

I have been cracking at this for a while now with no luck.

Using asyncfileupload control to upload a file and display the image. The uploading works fine and image is displayed if I reload/refresh the page.

But need to know how I can do this without reloading/refreshing the page.

After reading online posts, I see a recommendation to use scriptmanager but this doesn't work for me:

    protected void FileUploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {

          .
          .
          .
          .

        ScriptManager.RegisterStartupScript(this, GetType(), "TestAlert",
        "window.parent.document.getElementById('" + img_ProfilePic.ClientID + "').src='" + "http://www.site.com/default.jpg" + "'开发者_运维问答);",
        true); 

}

Thank you, Behrouz

After wasting hours before discovering the bug mentioned by user554134, I came up with the following solution that uses jQuery (along with the asyncfileupload control).

• First get a compiled version of the AjaxToolkit that has the bug fixed, per user554134's link.

• Add some jQuery to hide/show an image.

$(document).ready(function () {
            $("#imgConfirmation").hide();
        });

The key point to remember is that the AsyncFileUpload control utilizes an iframe, so you need to have jquery access the parent of the frame when calling your "show" function. Eg:

        function showImage(imagePath) {
            $('#imgConfirmation', window.parent.document).attr("src", imagePath);
            $('#imgConfirmation', window.parent.document).show();
        }

• In your UploadedComplete event, after saving the file, register the client script to hook into the js function. Eg,

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('" + myLink + "');", true);

After a few days, that's right, few day of debugging, I found this is a bug:

http://ajaxcontroltoolkit.codeplex.com/workitem/26761

I hope this will save other people some time.

You may want to check the JS in your ScriptManager. It looks like you may have an extra ")" at the end of your JavaScript string which could be causing your error.

If you are still having issues, the following link should point you in the right direction for using AsyncFileUpload with an UpdatePanel
http://forums.asp.net/t/1479689.aspx?PageIndex=2

Check this link ,I think so it is use full to you

http://www.aspsnippets.com/Articles/Display-image-after-upload-without-page-refresh-or-postback-using-ASP.Net-AsyncFileUpload-Control.aspx

Code Used:

Upload and Display code

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 

{ 

string strPath = MapPath("~/upload/") + Path.GetFileName(e.FileName); 

AsyncFileUpload1.SaveAs(strPath); 

displayImage.ImageUrl = strPath; 

} 

Need to add the following in the client side JavaScript.

<script type="text/javascript"> 

function uploadComplete(sender, args) { 

var imageName = args.get_fileName(); 

$get("displayImage").src = "./upload/" + imageName; 

} 

</script> 

Control to Use AsyncFileUpload:

detail : https://code.msdn.microsoft.com/How-to-upload-an-image-and-c3703a2c