如何使用图像更新面板答案

【问题标题】：How to updatepanel with image如何使用图像更新面板
【发布时间】：2013-08-09 12:03:40
【问题描述】：

我想使用带有图像的更新面板。当图像选择并显示以进行预览时，仅更新该部分。

<div class="field-block button-height">
  <label for="file" class="label">
    <b>Image</b> (*.jpg)
  </label>
  <table>
    <tr>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <td>
            <span class="input file">
              <span class="file-text"></span>
              <span class="button compact">Select file</span>
              <asp:FileUpload ID="fuMovieLogo" runat="server" CssClass="file withClearFunctions />"
            </span>
            <br />
            <small class="input-info">Max file size: 2MB</small>
            <asp:Button ID="btnPreview" runat="server" Text="Preview" onclick="btnPreview_Click" />
            <asp:Button ID="btnCancelprev" runat="server" Text="Cancel" onclick="btnCancelprev_Click"/>
          </td>
          <td style="padding-left:10px">
            <asp:Image ID="imgTheatreLogo" runat="server" Width="130px" />
            <br />
            <asp:Label ID="lblupdatelogo" runat="server" CssClass="lbl" Visible="false" Text="FDMovieUntitled.jpg"></asp:Label>
          </td>
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnPreview" EventName="Click" />
          <asp:AsyncPostBackTrigger ControlID="btnCancelprev" EventName="Click" />
        </Triggers>
      </asp:UpdatePanel>
    </tr>
  </table>
</div>

请帮帮我。

【问题讨论】：

标签： c# asp.net updatepanel ajaxcontroltoolkit updateprogress

【解决方案1】：

所以你只需要稍微重构你的标记。您需要将imgTheatreLogo 放在更新面板中。触发器实际上由更新面板外部的控件处理。 See this documentation 供参考以了解 UpdatePanel 的工作原理。

<?xml version="1.0" encoding="utf-8"?>
<div class="field-block button-height">
  <label for="file" class="label">
    <b>Image</b> (*.jpg)
  </label>
  <table>
    <tr>
      <td>
        <span class="input file">
          <span class="file-text"></span>
          <span class="button compact">Select file</span>
          <asp:FileUpload ID="fuMovieLogo" runat="server" CssClass="file withClearFunctions />"
        </span>
        <br />
        <small class="input-info">Max file size: 2MB</small>
        <asp:Button ID="btnPreview" runat="server" Text="Preview" onclick="btnPreview_Click" />
        <asp:Button ID="btnCancelprev" runat="server" Text="Cancel" onclick="btnCancelprev_Click"/>
      </td>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <td style="padding-left:10px">
            <asp:Image ID="imgTheatreLogo" runat="server" Width="130px" />
            <br />
            <asp:Label ID="lblupdatelogo" runat="server" CssClass="lbl" Visible="false" Text="FDMovieUntitled.jpg"></asp:Label>
          </td>
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnPreview" EventName="Click" />
          <asp:AsyncPostBackTrigger ControlID="btnCancelprev" EventName="Click" />
        </Triggers>
      </asp:UpdatePanel>
    </tr>
  </table>
</div>

【讨论】：

我这样做了，但看不到图像。
@VIPULPARMAR，你是在服务器端设置它吗？您将不得不实际上传图像服务器端，保存它，然后将其设置为图像上的src。