Support forums » Products » Ajax Uploader » Re: get client path of image

get client path of image

Last post 11-17-2010, 8:59 PM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  11-15-2010, 3:25 PM 65015

    get client path of image

    Reply Quote
       I want to be able to loop thru files that were uploaded and set an IMG SRC= to those files so they can be displayed on the pageright after they are uploaded.   I can't seem to find any examples of doing anything like this.  Basically, I have a page that a user clicks a button to open the start manual upload page.  The page they're on consists of many IMG tags.  Once the new page is loaded and the user selects and uploads files, I'd like the calling page IMG src properties to be set to the images uploaded so they show on the page.  Any way to do this?

  •  11-17-2010, 8:59 PM 65072 in reply to 65015

    Re: get client path of image

    Reply Quote
    HI krm0503,
     
    There are two example, please create a folder name "Uploads" under the root of your site to start test the examples.
     
    1 will update the images every uploaded
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <script runat="server">     
    6.      
    7.    
    8.     protected override void OnPreRender(EventArgs e)  
    9.     {  
    10.         SubmitButton.Attributes["itemcount"] = Uploader1.Items.Count.ToString();  
    11.   
    12.         base.OnPreRender(e);  
    13.     }  
    14.   
    15.   
    16.     protected void Uploader1_UploadCompleted(object sender, UploaderEventArgs[] args)  
    17.     {  
    18.   
    19.         DataTable dt = new DataTable();  
    20.         dt.Columns.Add(new DataColumn("src", typeof(String)));  
    21.         DataRow dr;  
    22.         for (int i = 0; i < args.Length; i++)  
    23.         {  
    24.             args[i].CopyTo("~/Uploads/" + args[i].FileName);  
    25.             dr = dt.NewRow();  
    26.             dr[0] = "~/Uploads/" + args[i].FileName;  
    27.             dt.Rows.Add(dr);  
    28.   
    29.         }  
    30.         DataView dv = new DataView(dt);  
    31.         DataList1.DataSource = dv;  
    32.         DataList1.DataBind();  
    33.   
    34.   
    35.   
    36.     }  
    37. </script>  
    38.   
    39. <html xmlns="http://www.w3.org/1999/xhtml">  
    40. <head runat="server">  
    41.     <title>Start uploading manually</title>  
    42. </head>  
    43. <body>  
    44.     <form id="form1" runat="server">  
    45.         <CuteWebUI:UploadAttachments runat="server" ManualStartUpload="true" ID="Uploader1"  
    46.             OnUploadCompleted="Uploader1_UploadCompleted">  
    47.         </CuteWebUI:UploadAttachments>  
    48.         <br />  
    49.         <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"  
    50.             Text="Submit" />  
    51.         <asp:DataList ID="DataList1" runat="server">  
    52.             <ItemTemplate>  
    53.                 <asp:Image ID="image1" runat="server" ImageUrl='<%# Eval("src") %>' />  
    54.             </ItemTemplate>  
    55.         </asp:DataList>  
    56.   
    57.         <script type="text/javascript">  
    58.   
    59.   
    60.     function submitbutton_click()  
    61.     {  
    62.   
    63.         var uploadobj=document.getElementById('<%=Uploader1.ClientID %>');  
    64.         var submitbutton=document.getElementById('<%=SubmitButton.ClientID %>');  
    65.           
    66.         if(!window.filesuploaded)  
    67.         {  
    68.             if(uploadobj.getqueuecount()>0)  
    69.             {  
    70.                 uploadobj.startupload();  
    71.             }  
    72.             else  
    73.             {  
    74.                 var uploadedcount=parseInt(submitbutton.getAttribute("itemcount"))||0;  
    75.                 if(uploadedcount>0)  
    76.                 {  
    77.                     return true;  
    78.                 }  
    79.                 alert("Please browse files for upload");  
    80.             }  
    81.             return false;  
    82.         }  
    83.         window.filesuploaded=false;  
    84.         return true;  
    85.     }  
    86.     function CuteWebUI_AjaxUploader_OnPostback()  
    87.     {  
    88.         window.filesuploaded=true;  
    89.         var submitbutton=document.getElementById('<%=SubmitButton.ClientID %>');  
    90.         submitbutton.click();  
    91.         return false;  
    92.     }  
    93.         </script>  
    94.   
    95.     </form>  
    96. </body>  
    97. </html> 
     
    2 will show all images you uploaded
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <script runat="server">     
    6.       
    7.     DataTable dt = new DataTable();  
    8.     ICollection CreateDataSource()  
    9.     {  
    10.         DataRow dr;  
    11.         dt.Columns.Add(new DataColumn("src", typeof(String)));  
    12.         for (int i = 0; i < Uploader1.Items.Count; i++)  
    13.         {  
    14.             dr = dt.NewRow();  
    15.             dr[0] = "~/Uploads/" + Uploader1.Items[i].FileName;  
    16.   
    17.             dt.Rows.Add(dr);  
    18.         }  
    19.         DataView dv = new DataView(dt);  
    20.         return dv;  
    21.     }  
    22.   
    23.     protected override void OnPreRender(EventArgs e)  
    24.     {  
    25.         SubmitButton.Attributes["itemcount"] = Uploader1.Items.Count.ToString();  
    26.   
    27.         base.OnPreRender(e);  
    28.     }  
    29.     protected void Uploader1_UploadCompleted(object sender, UploaderEventArgs[] args)  
    30.     {  
    31.   
    32.         DataView dv = new DataView(dt);  
    33.         DataList1.DataSource = CreateDataSource();  
    34.         DataList1.DataBind();  
    35.     }  
    36.   
    37.     protected void Uploader1_FileUploaded(object sender, UploaderEventArgs args)  
    38.     {  
    39.         args.CopyTo("~/Uploads/" + args.FileName);  
    40.     }  
    41. </script>  
    42.   
    43. <html xmlns="http://www.w3.org/1999/xhtml">  
    44. <head id="Head1" runat="server">  
    45.     <title>Start uploading manually</title>  
    46. </head>  
    47. <body>  
    48.     <form id="form1" runat="server">  
    49.         <CuteWebUI:UploadAttachments runat="server" ManualStartUpload="true" ID="Uploader1"  
    50.             OnUploadCompleted="Uploader1_UploadCompleted" OnFileUploaded="Uploader1_FileUploaded">  
    51.         </CuteWebUI:UploadAttachments>  
    52.         <br />  
    53.         <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"  
    54.             Text="Submit" />  
    55.         <asp:DataList ID="DataList1" runat="server">  
    56.             <ItemTemplate>  
    57.                 <asp:Image ID="image1" runat="server" ImageUrl='<%# Eval("src") %>' />  
    58.             </ItemTemplate>  
    59.         </asp:DataList>  
    60.   
    61.         <script type="text/javascript">  
    62.   
    63.   
    64.     function submitbutton_click()  
    65.     {  
    66.   
    67.         var uploadobj=document.getElementById('<%=Uploader1.ClientID %>');  
    68.         var submitbutton=document.getElementById('<%=SubmitButton.ClientID %>');  
    69.           
    70.         if(!window.filesuploaded)  
    71.         {  
    72.             if(uploadobj.getqueuecount()>0)  
    73.             {  
    74.                 uploadobj.startupload();  
    75.             }  
    76.             else  
    77.             {  
    78.                 var uploadedcount=parseInt(submitbutton.getAttribute("itemcount"))||0;  
    79.                 if(uploadedcount>0)  
    80.                 {  
    81.                     return true;  
    82.                 }  
    83.                 alert("Please browse files for upload");  
    84.             }  
    85.             return false;  
    86.         }  
    87.         window.filesuploaded=false;  
    88.         return true;  
    89.     }  
    90.     function CuteWebUI_AjaxUploader_OnPostback()  
    91.     {  
    92.         window.filesuploaded=true;  
    93.         var submitbutton=document.getElementById('<%=SubmitButton.ClientID %>');  
    94.         submitbutton.click();  
    95.         return false;  
    96.     }  
    97.         </script>  
    98.   
    99.     </form>  
    100. </body>  
    101. </html> 
     
    Regards,
     
    ken
View as RSS news feed in XML