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

}

谢谢你，贝洛兹

Answer 1

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

首先得到一个编译版本修复了bug的AjaxToolkit，每个用户554134的链接。
添加一些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);

Answer 2

几天之后，这是正确的，几天的调试，我发现这是一个错误：

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

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

Answer 3

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

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

Answer 4

检查此链接，我认为这是完全使用

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

Answer 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中添加以下内容。

＆＃13;

<script type="text/javascript"> 

function uploadComplete(sender, args) { 

var imageName = args.get_fileName(); 

$get("displayImage").src = "./upload/" + imageName; 

} 

</script>

＆＃13;

控制使用AsyncFileUpload：

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

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

5 个答案: