asyncfileupload在上传后显示图像而不刷新页面

Question

我已经在这一段时间里坚持了一段时间没有运气.

使用asyncfileupload控件上传文件并显示图像.如果我重新加载/刷新页面,上传工作正常并显示图像.

但需要知道如何在不重新加载/刷新页面的情况下执行此操作.

阅读在线帖子后,我看到了使用scriptmanager的建议,但这对我不起作用:

    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); 

}

谢谢Behrouz

Answer 1

在发现user554134提到的bug之前浪费了几个小时后,我想出了以下使用jQuery的解决方案(以及asyncfileupload控件).

• 首先根据用户554134的链接获取已修复错误的AjaxToolkit的编译版本.

• 添加一些jQuery来隐藏/显示图像.

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

要记住的关键点是AsyncFileUpload控件使用iframe,因此在调用"show"函数时需要让jquery访问框架的父级.例如:

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

• 在UploadedComplete事件中,保存文件后,注册客户端脚本以挂钩到js函数.例如,

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