この例では、クライアント側イベント「complete」と「upload」を使用して、画像ファイルをアップロードするときに、選択されたファイルを Image コントロールに表示します。

1. Web サイトプロジェクトのデザインビューで、ページに Image コントロールを追加します。
2. ページに C1Upload コントロールを追加し、［プロパティ］ウィンドウでMaximumFiles プロパティを 1 に設定します。これで、アップロード時にファイルを１つだけ選択できるようになります。
3. OnClientComplete プロパティを complete に設定します。
4. OnClientUpload プロパティを upload に設定します。
5. ［ソース］タブをクリックしてソースビューに切り替え、次の JavaScript マークアップを<cc1:C1Upload ... /> マークアップの後に追加します。

   ソースビュー	コードのコピー
   <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>

   プロジェクトのマークアップ 全体は次のようになります。

   ソースビュー

   コードのコピー

   <%@ 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">        <%--ページに Image コントロールを追加します。--%>     <asp:Image ID="Image1" runat="server" />      <%-- クライアント側イベント「complete」と「upload」を呼び出して、1にアップロードするファイルの最大数を設定します。--%>     <cc1:C1Upload ID="C1Upload1" runat="server" OnClientComplete="complete"         OnClientUpload="upload" width="300px" MaximumFiles="1" />               <script type="text/javascript">              var ImageSrc = "";              // アップロードの前に、アップロードの完了時にターゲットフォルダ「UploadedFiles」に保存されるファイルを画像に設定します。              function upload(e, args) {                  ImageSrc = "UploadedFiles/" + args[0].files[0].name;              }              // アップロードが完了すると、ターゲットフォルダに保存された画像ファイルが Image コントロールに表示されます。              function complete(e, args) {                  $("#<%=Image1.ClientID %>").attr("src", ImageSrc);              }                    </script> </asp:Content>

プロジェクトを実行し、［ファイルのアップロード］をクリックして、画像ファイルを１つ選択します。［すべてのファイルをアップロード］をクリックします。ファイルのアップロードが完了すると、その画像がページの Image コントロールに表示されます。