In this example, the "complete" and "upload" client-side events are used to show the selected file in an Image control when the image file is uploaded.

1. In Design view of your Web site project, add an Image control to the page.
2. Add a C1Upload control to the page and in the Properties window, set the MaximumFiles property to 1. This allows only one file to be selected for uploaded.
3. Set the OnClientComplete property to complete.
4. Set the OnClientUpload property to upload.
5. Click the Source tab to switch to Source view and add the following JavaScript markup after the <cc1:C1Upload /> markup:

   <script type="text/javascript">
                var ImageSrc = "";
                function upload(e, args) {
                    ImageSrc = "UploadedFiles/" + args[0].files[0].name;
    }
                function complete(e, args) {      
                    $("#<%=Image1.ClientID %>").attr("src", ImageSrc);       
                }               
    </script>
   

   The complete markup for the project should look similar to this:

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
       CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
   <%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1Upload" TagPrefix="cc1" %>
    
   <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   </asp:Content>
   <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
      
      <%--Add an Image control to the page.--%>
       <asp:Image ID="Image1" runat="server" />
    
      <%-- Call the "complete" and "upload" client-side events and set the maximum number of files to be uploaded to 1.--%>
       <wijmo:C1Upload ID="C1Upload1" runat="server" OnClientComplete="complete"
           OnClientUpload="upload" width="300px" MaximumFiles="1" />
     
     
            <script type="text/javascript">
                var ImageSrc = "";
    
                // Before upload, the image is set to the file that will be saved in the TargetFolder "UploadedFiles" once upload is complete. 
                function upload(e, args) {
                    ImageSrc = "UploadedFiles/" + args[0].files[0].name;
                }
    
                // Once upload is complete, the image file saved in the TargetFolder appears in the Image control.
                function complete(e, args) {
                    $("#<%=Image1.ClientID %>").attr("src", ImageSrc);
                }               
       </script>
   </asp:Content>
   

When you run the project, click Upload Files and select an image file. Click Upload All, and when the file is finished uploading, the image appears in the Image control on the page.