在异步实现文件上载控制时,UpdateProgress和触发器部分在"更新"面板中不起作用

Question

我试图在更新面板中上传带有asp.net文件上传控件的图像文件.我想处理UpdateProgress以显示进度条图像,指示进度以及文件上载.

情况1:当我删除触发器部分并使用UpdateProgress部分时,进度过程正常,但文件上载控件无法上传我的文件.[ 该页面无法重新加载 ]

情况2:当我使用触发器部分并删除UpdateProgress部分时,文件上传但页面重新加载.

预期:我真正想要的是一个精美的文件上传过程,其中包括UpdateProgress以显示进度图像,严格来说没有页面加载.

我去过的是:

.aspx部分

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>


<asp:UpdateProgress ID="loading" runat="server">

<ProgressTemplate>

<asp:Image ID="Image1" CssClass="loadingGeneral" ImageUrl="../Images/loading(1).gif" AlternateText="Processing" runat="server" />

</ProgressTemplate>

  </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

    <asp:FileUpload ID="fileUploadForAlbum" multiple="true" CssClass="buttonclass"  runat="server"  ToolTip="Click to browse image." />
    <asp:Button ID="btn_uploadAlbum" runat="server" class="buttonclass" OnClick="btnUploadAlbum_Click" Text="Upload Slider" />

    </ContentTemplate>
        <Triggers>
             <asp:PostBackTrigger ControlID="btn_uploadAlbum" />
        </Triggers>
        </asp:UpdatePanel>

.aspx.cs部分

文件上传代码部分很好,我用以下来实现进度条.

   protected void btnUploadAlbum_Click(object sender, EventArgs e)
{
            System.Threading.Thread.Sleep(2000);
            do something.........
}

提前致谢.任何帮助表示赞赏.

Answer 1

关于FileUpload控制有一些有趣的事实要知道.

1.)文件上传控件不适用于异步回发.它总是需要回发才能正常工作.这就是您看到整页回发的原因.

2.)AsyncPostbackTrigger在这里不会帮助防止回发.

MSDN 清楚地说:

The FileUpload control is designed to be used only in postback scenarios 
and not in asynchronous postback scenarios during partial-page rendering.
When you use a FileUpload control inside an UpdatePanel control, the file must
be uploaded by using a control that is a PostBackTrigger object for the panel

这可以推断我们的第三点:

3.)我们需要用来PostBackTrigger使FileUpload控件工作UpdatePanel,然后将有一个完整的页面回发.

你的问题:

What I really want is a fine file upload process that includes UpdateProgress 
to show progress image and strictly with no page loads

对此的一个好的答案是使用AsyncFileUpload控件.此控件的功能:

• 它在更新面板中工作
• 您可以使用ThrobberID属性在文件上传过程中显示加载图像.
• 它上传文件时没有任何回发
• 它提供客户端和服务器端事件
• 显示文件上载有不同的着色选项.例如,如果上传成功,它会显示绿色:使用CompleteBackColor属性,否则如果上传不成功,则使用ErrorBackColor属性显示红色.

在您的.aspx页面上,放置一个脚本管理器并注册Ajax控件工具包DLL.

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" TagPrefix="ajaxasyncFU" %>

现在放置AsyncFileUpload控件:

<ajaxasyncFU:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
OnClientUploadComplete="UploadComplete" 
CompleteBackColor="Lime" UploaderStyle="Modern" 
ErrorBackColor="Red" ThrobberID="Throbber" 
onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 
UploadingBackColor="#66CCFF" />

有3个客户端事件,你可以使用:OnClientUploadError,OnClientUploadStarted,和OnClientUploadComplete

And one Server side event: onuploadedcomplete, which is called in asynchronous manner thus avoiding full page postback. In this server event usually we save the file:

protected void AsyncFileUpload1_UploadedComplete
    (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{      
  if (AsyncFileUpload1.HasFile)
  {
    string strPath = MapPath("~/MyImages/") + Path.GetFileName(e.filename);
    AsyncFileUpload1.SaveAs(strPath);
  }
}

Check these 2 links: Link1 , Link2 for further reading.