使用 UpdateProgress 上传文件答案

【问题标题】：FileUpload with UpdateProgress使用 UpdateProgress 上传文件
【发布时间】：2009-08-24 08:41:08
【问题描述】：

更新：
我添加了一个 java 脚本函数：

function showWait()
            {
                if ($get('filUpload').value.length > 0)
                {
                    $get('UpdateProgress1').style.display = 'block';
                }
            }


 <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" OnClientClick="javascript:showWait();" Text="OK" CausesValidation="false" />

但是我需要这个在 ajax ModalPopupExtender 面板中工作，所以当我运行代码时，UpdateProgress 会出现，但动画 gif 没有动画！它是静态的！

<head runat="server">
 <script type="text/javascript">
            function showWait()
            {                       
                $get('UpdateProgress1').style.display = 'block';               
            }



        </script>
    <title>Untitled Page</title>
    <link href="Controls/UploadFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>


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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Button id="btnShowPopup" runat="server" Text="Open" />
      <asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" Width="280px" style="display:none;" >      


        <div id ="pnlDragMe" class="pnlDragMe">Image Uploader </div>   
        <div id="uploaderContent" class="uploaderContent" runat="server">      
            Select File:
          <br />
          <asp:FileUpload ID="filUpload" runat="server" />
          &nbsp;<br />
          <div id="buttons" >
             <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" OnClientClick="javascript:showWait();"  Text="OK" CausesValidation="false" />
             <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
          </div> 
        </div>  
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
           <ProgressTemplate>
               <img alt="" src="Images/ajax-loader.gif" style="width: 48px; height: 48px" />
               Uploading image...
           </ProgressTemplate>
        </asp:UpdateProgress>      
            <asp:Label ID="lblFeedbackOK" SkinID="FeedbackOK" runat="server"></asp:Label>
            <asp:Label ID="lblFeedbackKO" SkinID="FeedbackKO" runat="server"></asp:Label>              


        <cc1:ModalPopupExtender ID="mdlPopup1" runat="server" 
           TargetControlID="btnShowPopup" PopupControlID="pnlUploader" 
           CancelControlID="btnCancel" BackgroundCssClass="modalBackground" 
           PopupDragHandleControlID="pnlDragMe" Drag="true" RepositionMode="None" />
      </asp:Panel>


    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>    

</asp:UpdatePanel>

    </form>
</body>

我猜动画 gif 是静态的，因为 PostBackTrigger。

【问题讨论】：

标签： c# asp.net jquery ajax

【解决方案1】：

FileUpload 控件在 UpdatePanel 中不起作用。

见http://msdn.microsoft.com/en-us/library/cc295545.aspx

【讨论】：