Dynamically displaying a bunch images using Ajax

Question

User-1561933206 posted

Hi,

I have a bunch of images stored in a List<string> storing the paths of the images which I have obtained using AjaxFileUpload.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>
<asp:ajaxfileupload ID="Ajaxfileupload1" runat="server" OnUploadComplete="FileUploadComplete" OnUploadCompleteAll="FileUploadCompleteAll" EnableViewState="true" >
</asp:ajaxfileupload>

<asp:UpdatePanel ID="_updatePanel" runat="server">
            
  <ContentTemplate>
                
     <asp:PlaceHolder ID="_ph" runat="server">
                    
     </asp:PlaceHolder>
  </ContentTemplate>
</asp:UpdatePanel>

In codebehind, I have

protected void FileUploadCompleteAll(object sender, System.EventArgs e)
{
  for (int i = 0; i < fN.Count; i++)
  {
     System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
     img.ImageUrl = fN[i];
     _ph.Controls.Add(img);

  }        
}

fN is a List<string> and has all the image paths.

Please let me know what wrong I am doing here and a possible fix.

Thank you

Answer 1

User1208776063 posted

img.ImageUrl = fN[i];

You need to make sure that images are downloaded to some temporary location on the server. Then, you can use Server.MapPath("~/tempImages/"+Path.GetFileName(fn[i])); Otherwise, uploaded file path will the path of the file on client's machine such as C://myfile.jpg.  Debug and see what's being saved in the list fn.

Answer 2

User-1561933206 posted

Hi dotnetzoom,

fN[i] does have the complete path of the images. Could the problem be related to the PlaceHolder I am using?

I tried using Panel instead of PlaceHolder but even that didn't work. Am I suppose to use some kind of RenderControl to display the images?

When I try to debug, images get added to the PlaceHolder but nothing happens at the end of FileUploadAll method.

Answer 3

User-933407369 posted

i would suggest you try the code or place the Ajaxfileupload into the UpdatePanel :

   _updatePanel.FindControl("_ph").Controls.Add(img);

please refer to the link for details:

Understanding ASP.NET AJAX UpdatePanel Triggers

http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

Answer 4

User555306248 posted

Hi,

Please refer to the example at: http://forums.asp.net/p/1603720/4091630.aspx#4091630

http://forums.asp.net/t/1894718.aspx?AjaxFileUpload+Upload+and+display+image+