2

更新パネル内で 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.........
}

前もって感謝します。どんな助けでも大歓迎です。

4

1 に答える 1

5

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 番目のポイントが推測されます。

3.)コントロールを で動作PostBackTriggerさせるために を使用する必要があります。これにより、ページ全体がポストバックされます。FileUploadUpdatePanel

あなたの質問:

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

これに対する良い答えの 1 つは、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

そして、1 つのサーバー側イベント:onuploadedcompleteが非同期で呼び出されるため、ページ全体のポストバックが回避されます。このサーバー イベントでは、通常、ファイルを保存します。

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

Link1詳細については、次の 2 つのリンクを確認してくださいLink2。

于 2013-09-26T04:30:49.373 に答える