Uploader for Silverlight
手順 2：コードの追加
クイックスタート > 手順 2：コードの追加

前の手順で、Silverlight アプリケーションを設定しました。ただし、この時点でアプリケーションを実行しても、ボタンとパネルは動作しません。この手順では、引き続き Visual Studio で作業し、プロジェクトに C1Uploader クラスを実装するためのコードを追加します。

C1Uploader クラスを実装するには、次の手順に従います。

  1. ソリューションエクスプローラに移動し、MainPage.xaml ファイルを右クリックして［コードの表示］を選択し、コードビューに切り替えます。

  2. コードビューで、次の Imports または using 文をページの先頭に追加します（ページに含まれていない場合）。

    コードのコピー 
    Imports System.Windows.Controls
Imports System.IO
Imports System.Diagnostics
Imports C1.Silverlight
Imports C1.Silverlight.Uploader
    コードのコピー 
    using System.Windows.Controls;
using System.IO;
using System.Diagnostics;
using C1.Silverlight;
using C1.Silverlight.Uploader;

  3. MainPage.xaml.cs または MainPage.xaml.vb ファイルで MainPage クラスの他のすべてのメソッドの下に、次のイベントハンドラを追加します。

    コードのコピー 
    Private Sub Upload_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' OpenFileDialog を設定します
    Dim dlg As New OpenFileDialog()
    dlg.Filter = "すべてのファイル|*.*|画像|*.jpg;*.png;*.gif"
    dlg.FilterIndex = 2
    dlg.Multiselect = True
    ' OpenFileDialog を表示します
    If CBool(dlg.ShowDialog()) Then
        Try
        ' ファイルが実際に画像かどうかをチェックします
        For Each fdi As FileInfo In dlg.Files
            Dim img As New System.Windows.Media.Imaging.BitmapImage()
            img.SetSource(fdi.OpenRead())
        Next
        Catch
   C1MessageBox.Show("少なくとも１個のファイルが画像ではないようです。", "アップロード中止", C1MessageBoxButton.OK, C1MessageBoxIcon.Warning)
        Exit Sub
        End Try
        ' アップローダーを作成して設定します
         Dim uri As Uri = BuildAbsoluteUri("photoUpload.ashx")
        Dim uploader As C1Uploader = New C1UploaderPost(uri)
        AddHandler uploader.UploadProgressChanged, AddressOf uploader_UploadProgressChanged
        AddHandler uploader.UploadCompleted, AddressOf uploader_UploadCompleted
        ' 選択されたファイルをアップロードします
         uploader.AddFiles(dlg.Files)
        uploader.BeginUploadFiles()
   End If
End Sub
    コードのコピー 
    private void Upload_Click(object sender, RoutedEventArgs e)
{
    // OpenFileDialog を設定します
    OpenFileDialog dlg = new OpenFileDialog();
    dlg.Filter = "すべてのファイル|*.*|画像|*.jpg;*.png;*.gif"
    dlg.FilterIndex = 2;
    dlg.Multiselect = true;
    // OpenFileDialog を表示します
    if ((bool)dlg.ShowDialog())
    {
        try
        {
            // ファイルが実際に画像かどうかをチェックします
            foreach (FileInfo fdi in dlg.Files)
            {
              System.Windows.Media.Imaging.BitmapImage img = new System.Windows.Media.Imaging.BitmapImage();
              img.SetSource(fdi.OpenRead());
            }
        }
        catch
        {
            C1MessageBox.Show(
            "少なくとも１個のファイルが画像ではないようです。",
            "アップロード中止", C1MessageBoxButton.OK, C1MessageBoxIcon.Warning);
            return;
        }
        // アップローダーを作成して設定します
        Uri uri = BuildAbsoluteUri("photoUpload.ashx");
        C1Uploader uploader = new C1UploaderPost(uri);
        uploader.UploadProgressChanged += uploader_UploadProgressChanged;
        uploader.UploadCompleted += uploader_UploadCompleted;
        // 選択されたファイルをアップロードします
        uploader.AddFiles(dlg.Files);
        uploader.BeginUploadFiles();
    }
}

    このイベントハンドラは、最初に、ユーザーがアップロードするファイルを選択するための OpenFileDialog を表示します。Silverlight は安全なサンドボックス環境で実行されるため、ファイルシステムに直接アクセスすることはできません。ただし、OpenFileDialog クラスは、ユーザーによって明示的に選択された特定のファイルへのアクセスを許可します。IsolatedStorage 領域内のファイルにアクセスすることもできます。

    ファイルが選択されると、このコードは、それらのファイルが実際に画像かどうかをチェックします。それには、BitmapImage オブジェクトを作成し、それらのファイルをこのオブジェクトにロードします。ファイルに画像が含まれていない場合は、例外が生成され、処理が中断されます。このチェックにより、ユーザーが不正な種類のファイルを誤ってアップロードしたり、悪質な目的でアップロードすることを防止できます。後で、サーバー側でも同様のセキュリティチェックを実行します。

    ファイルが検証されると、このコードは新しい C1UploaderPost オブジェクトを作成します。C1Uploader オブジェクトには、C1UploaderPost と C1UploaderWebService の２種類あります。この２つの違いは、サーバー側でファイルを受信する方法です。C1UploaderPost は、次の手順で示すように、とても使いやすいマルチパート POST プロトコルを使用します。

  4. プロジェクトに次のイベントハンドラを追加します。

    コードのコピー 
    Public Shared Function BuildAbsoluteUri(ByVal relativeUri As String) As Uri
    ' 現在の絶対 URI を取得します。これは、アプリケーションが展開される場所に依存します
    Dim uri As Uri = System.Windows.Browser.HtmlPage.Document.DocumentUri
    Dim uriString As String = uri.AbsoluteUri
    ' ページ名を相対サービス URI に置き換えます
    Dim ls As Integer = uriString.LastIndexOf("/"c)
    uriString = uriString.Substring(0, ls + 1) + relativeUri
    ' 新しい URI を返します
    Return New Uri(uriString, UriKind.Absolute)
End Function
    コードのコピー 
    public static Uri BuildAbsoluteUri(string relativeUri)
{
    // 現在の絶対 URI を取得します。これは、アプリケーションが展開される場所に依存します
    Uri uri = System.Windows.Browser.HtmlPage.Document.DocumentUri;
    string uriString = uri.AbsoluteUri;
    // ページ名を相対サービス URI に置き換えます
    int ls = uriString.LastIndexOf('/');
    uriString = uriString.Substring(0, ls + 1) + relativeUri;
    // 新しい URI を返します
    return new Uri(uriString, UriKind.Absolute);
}

    C1UploaderPost コンストラクタには、サーバー側でファイルを処理するハンドラの Uri を指定するパラメータが必要です。Silverlight は絶対 Uri を要求するため、このコードでは、アプリケーションが開発マシンで実行されていても、本稼動サーバーで実行されていても機能するヘルパーメソッド BuildAbsoluteUri を使用します。

    また、このコードは、イベントハンドラを新しい C1UploaderPost の UploadProgressChanged および UploadCompleted イベントにアタッチします。次の手順で追加するコードは、前者を使ってアップロード処理の進捗状況をチェックし、後者を使ってアップロードされたファイルを表示します。

  5. プロジェクトに次のイベントハンドラを追加します。

    コードのコピー 
    Private Sub uploader_UploadProgressChanged(ByVal sender As Object, ByVal e As
C1.Silverlight.Uploader.UploadProgressChangedEventArgs)
    Debug.WriteLine("アップロード中 {0}／{1} バイト、{2}％", e.BytesUploaded, e.TotalBytesToUpload, e.ProgressPercentage)
End Sub
Private Sub uploader_UploadCompleted(ByVal sender As Object, ByVal e As UploadCompletedEventArgs)
    If e.Success Then
        For Each fileName As String In e.Files
        ' ピクチャとタイトルのホルダ
        Dim picHolder As New StackPanel()
        picHolder.Width = 200
        ' ピクチャを表示するための Image を作成します
        Dim bmp As New System.Windows.Media.Imaging.BitmapImage()
        bmp.UriSource = BuildAbsoluteUri("Pictures/" & fileName)
        Dim img As New Image()
        img.Source = bmp
        img.Margin = New Thickness(10, 10, 10, 0)
        picHolder.Children.Add(img)
        ' 画像タイトルを作成します
        Dim tb As New TextBlock()
        tb.Text = fileName
        tb.FontSize = 12
        tb.HorizontalAlignment = HorizontalAlignment.Center
        tb.Margin = New Thickness(10, 0, 10, 10)
        picHolder.Children.Add(tb)
        ' パネルにピクチャホルダを追加します
        PicturePanel.Children.Add(picHolder)
        Next
    Else
        Debug.WriteLine("アップロード失敗: {0}", If(e.[Error] IsNot Nothing, e.[Error].Message, "??"))
    End If
End Sub
    コードのコピー 
    void uploader_UploadProgressChanged(object sender, C1.Silverlight.Uploader.UploadProgressChangedEventArgs e)
{
    Debug.WriteLine("アップロード中 {0}／{1} バイト、{2}％",
    e.BytesUploaded,
    e.TotalBytesToUpload,
    e.ProgressPercentage);
}
void uploader_UploadCompleted(object sender, UploadCompletedEventArgs e)
{
    if (e.Success)
    {
        foreach (string fileName in e.Files)
        {
            // ピクチャとタイトルのホルダ
            StackPanel picHolder = new StackPanel();
           picHolder.Background = new SolidColorBrush(Colors.LightGray);
           picHolder.Margin = new Thickness(10);
           picHolder.Width = 200;
           // ピクチャを表示するための Image を作成します
            System.Windows.Media.Imaging.BitmapImage bmp = new System.Windows.Media.Imaging.BitmapImage();
           bmp.UriSource = BuildAbsoluteUri("Pictures/" + fileName);
           Image img = new Image();
           img.Source = bmp;
           img.Margin = new Thickness(10, 10, 10, 0);
           picHolder.Children.Add(img);
           // 画像タイトルを作成します
            TextBlock tb = new TextBlock();
           tb.Text = fileName;
           tb.FontSize = 12;
           tb.HorizontalAlignment = HorizontalAlignment.Center;
           tb.Margin = new Thickness(10, 0, 10, 10);
           picHolder.Children.Add(tb);
           // パネルにピクチャホルダを追加します
            PicturePanel.Children.Add(picHolder);
        }
    }
    else
    {
        Debug.WriteLine("アップロード失敗: {0}", e.Error != null ? e.Error.Message : "??");
    }
}

    このコードは、アップロードが成功したかどうかをチェックし、次にファイルをループ処理して、ファイルごとに新しい Image 要素を作成します。Image 要素は、画像がサーバーの「Pictures」フォルダに保存されると仮定して、画像を表示するように設定されます。

ここまでの成果

Silverlight アプリケーションを正しく作成し、コントロールをページに追加しました。ここでプロジェクトを実行し、いくつかのピクチャをアップロードしてみてください。エラーが表示されます。C1Uploader はサーバーにファイルを送信しますが、まだサーバーコードが実装されていないためです。次の手順では、このサーバーコードを実装します。

関連トピック
手順 3：サーバーコードの追加

 

 

Copyright © GrapeCity inc. All rights reserved.