как отобразить изображение после пользовательского выбора

Question

Моя проблема заключается в том, что я хочу получить предварительный просмотр изображения после того, как пользователь его выберет, , но, к сожалению, ничего не происходит. Я не понимаю, почему. Может ли кто-нибудь помочь мне?

Вот мой ASPX:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="btn-toolbar"> 
      <asp:Button runat="server" CssClass="btn btn-primary" ID="OK_btn" Text="OK" OnClick="OK_btn_Click" /> 
      <asp:LinkButton PostBackUrl="ClientMembershipDetailList.aspx" 
       OnClientClick="return blockConfirm('Are you sure you want to cancel?', event, '')" 
       CausesValidation="false" 
       runat="server" CssClass="btn btn-primary" ID="Cancel_btn" Text="Cancel" /> 
     </div> 
    </div> 
    <div class="well tab-primary ui-tabs"> 
     <ul class="nav nav-tabs ui-tabs-nav"> 
      <li class="active"><a href="#home" data-toggle="tab">Member Details</a></li> 
      <li><a href="#Dependants" data-toggle="tab">Dependants</a></li> 
      <li><a href="#MedicalHistory" data-toggle="tab">Medical History</a></li> 
     </ul> 
     <div id="myTabContent" class="tab-content"> 

      <div class="tab-pane active in" id="home"> 

       <div class="span6"> 
        <div class="form-horizontal"> 
         <div class="control-group"> 
          <label class="control-label">Client:</label> 
          <div class="controls with-tooltip"> 
           <asp:HiddenField runat="server" ID="ID_txt" /> 
           <asp:TextBox runat="server" CssClass="input-large" ID="ClientID_Txt" Enabled="false" /> 
          </div> 
         </div> 

         <asp:ScriptManagerProx ID="ScriptManager1" runat="server" /> 
         <div class="control-group"> 
          <label class="control-label">Picture</label> 
          <div class="controls with-tooltip"> 
           <asp:HiddenField runat="server" ID="Picture_Txt" /> 
           <asp:Image runat="server" Width="100" ImageUrl="~/Images/Pictures/PictureNA.jpg" 
            Height="120" ID="Picture_Img" /> 

           <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" 
            UploadingBackColor="SteelBlue" /> 
           <%--<asp:FileUpload runat="server" ID="PictureFileUpload" />--%> 
          </div> 
         </div> 

и это aspx.cs,

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
    { 
     System.Threading.Thread.Sleep(5000); 
     if (AsyncFileUpload1.HasFile) 
     { 
      string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString(); 

      AsyncFileUpload1.SaveAs(fileName); 
     } 

    } 

Answer 1

Убедитесь, что изображение находится внутри Ajax UpdatePanel, а затем, в вашем UploadedComplete установите источник изображения на это загруженное изображение.

Для этого вам необходимо сохранить свое изображение в общедоступном видимом месте на вашем сайте. Пример:

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
{ 
    if (AsyncFileUpload1.HasFile) 
    { 
     string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString(); 

     AsyncFileUpload1.SaveAs(fileName); 
     Picture_Img.ImageUrl = "~/Images" + Guid.NewGuid().ToString(); 
    } 
}