asyncfileupload 上传后显示图片而不刷新页面答案

【问题标题】：asyncfileupload show image after upload without refreshing the pageasyncfileupload 上传后显示图片而不刷新页面
【发布时间】：2011-01-18 06:27:46
【问题描述】：

我一直在努力解决这个问题，但没有运气。

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

}

谢谢你，贝鲁兹

【问题讨论】：

标签： c# asp.net ajax

【解决方案1】：

在发现 user554134 提到的错误之前浪费了几个小时后，我想出了以下使用 jQuery 的解决方案（以及 asyncfileupload 控件）。

首先获得一个编译版本的修复了错误的 AjaxToolkit，每个 user554134 的链接。
添加一些 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);

【讨论】：

谢谢！我已经发现了已经提到的错误，但我仍然无法让我的 div/面板以我想要的方式显示/隐藏。这成功了。可惜我两天前没找到这个！

【解决方案2】：

过了几天，没错，调试了几天，发现这是个bug：

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

我希望这可以为其他人节省一些时间。

【讨论】：

【解决方案3】：

您可能需要检查 ScriptManager 中的 JS。看起来您的 JavaScript 字符串末尾可能有一个额外的“)”，这可能会导致您的错误。

如果您仍然遇到问题，以下链接应为您指明正确的方向，将 AsyncFileUpload 与 UpdatePanel 结合使用
http://forums.asp.net/t/1479689.aspx?PageIndex=2

【讨论】：

【解决方案4】：

检查这个链接，我想它对你来说已经用完了

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

【讨论】：

只有链接不是很好的回答方式。如果将来链接被更新/编辑/删除，那么您的答案将自动失效。好方法是您应该稍微解释一下答案，然后参考链接。

【解决方案5】：

使用的代码：

上传并显示代码

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

{ 

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

AsyncFileUpload1.SaveAs(strPath); 

displayImage.ImageUrl = strPath; 

}

需要在客户端JavaScript中添加以下内容。

<script type="text/javascript"> 

function uploadComplete(sender, args) { 

var imageName = args.get_fileName(); 

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

} 

</script>

使用 AsyncFileUpload 的控件：

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

【讨论】：