Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

.NETでファイルアップロード機能を持ったWebページを作る

File Upload 1.0JのFile Uploadコントロールを使ったWebページの作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/05/21 14:00

 File Upload 1.0JのFile Uploadコントロールは、コードを書かずにプロパティの設定だけで、ファイルをWebサーバにアップロードできる機能を持ったコントロールです。しかも、Ajaxに対応しており、ファイルのアップロード状況を表示するパネルまで装備しています。

はじめに

 最近は、Webページを使ってファイルをアップロードできるサイトをよく見かけます。自分のサイトでもやってみたいところですが、機能や表示を凝ろうとすると難しそうです。

 File Upload 1.0JのFile Uploadコントロールは、コードを書かずにプロパティの設定だけで、ファイルをWebサーバにアップロードできる機能を持ったコントロールです。しかも、Ajaxに対応しており、ファイルのアップロード状況を表示するパネルまで装備しています。

 今回は、File Upload 1.0JのFile Uploadコントロールを使い、ファイルのアップロード機能を持ったWebページを作成してみました。

参照ボタンを押してファイルを選ぶだけですぐにアップロードされる
参照ボタンを押してファイルを選ぶだけですぐにアップロードされる
自動的にアップロードの進行状況を表示してくれる
自動的にアップロードの進行状況を表示してくれる

対象読者

 Visual Basic/ Visual C# 2005・2008を使ってプログラムを作ったことのある人。

必要な環境

 Visual Basic 2005、2008、Visual C# 2005、2008、Visual Studio 2005、2008でプログラムが作れる環境、およびIISなどのASP.NETが動作できるWebサーバ。.NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。

 なお、本プログラムはWindows Vista上で動作するVisual Studio 2005を使用して作成し、IIS6.0 Webサーバ上でInternet Explorer 8を使って動作確認を行っています(2009年5月21日現在、File Upload 1.0JのInternet Explorer 8対応は未発表です。実際に運用する場合はグレープシティの発表をお待ちください)。

サンプルプログラム実行時の注意事項

1.Visual StudioでサンプルWebサイトを開く

 Visual Studio 2005をお持ちであれば、File Upload 1.0JまたはSecure iNetSuite 2.5Jトライアル版をインストールし、ソースコード圧縮ファイル「myupload_vb_src.zip」または「myupload_cs_src.zip」を解凍して作成されるプロジェクトファイルをVisual Studioで開き、実行させてください。

2.Visual Studioを使わずにサンプルWebサイトを開く

 Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「myupload_vb_src.zip」または「myupload_cs_src.zip」を解凍して作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。

 以下は、Microsoft IISサーバにインストールする場合の手順です。

  1. プロジェクトファイルのフォルダを、そのままWebサーバへ配置します(例:¥Inetpub¥wwwroot直下へ配置)。
  2. サーバに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
  3. 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
  4. クライアントのWebブラウザで、Default.aspxファイルを開きます(例:http://localhost/mylive_vb/)。

 Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。

 <identity impersonate="false" />

コントロールのインストール

 はじめてFile Upload 1.0Jを使用する方は、プロジェクトにFile Upload 1.0Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。ダウンロードページの[申し込みフォーム]をクリックし、ユーザー情報を登録すると送られてくるメールにダウンロード用のURLが記載されているので、ここからダウンロードしてインストールしてください。ファイルはzip形式で圧縮されています。

 有償のコントロールですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 File Upload 1.0Jをインストールしたら、ツールボックスに専用のタブを作成し、コントロールを追加します。追加するコントロールは、「.NET Frameworkコントロール」の「名前空間」が「Dart.PowerWEB.FileUpload」で始まる「ProgressPanel」「Upload」「UploadManager」コントロールの3つです。

名前空間がDart.PowerWEB.FileUploadで始まるProgressPanel、Upload、UploadManagerコントロールを選択する
名前空間がDart.PowerWEB.FileUploadで始まるProgressPanel、Upload、UploadManagerコントロールを選択する

File Uploadコントロールについて

 File Uploadは、Ajax機能を搭載したWebアプリケーション用のファイルアップロードコンポーネントです。ポストバックを発行しないため、ページ全体を再描画することなく、Webサーバにファイルをアップロードできます。また、プログレスバーやファイルサイズ、アップロード時間の表示など、リアルタイムでアップロード状況を確認できる機能を提供し、複数ファイルの一括アップロードにも対応しています。

 コントロールの基本的な機能を使うのであれば、コードの記述は必要ありません。すべてコントロールが自動的に行ってくれます。コントロールの外観やフォルダの指定などは、プロパティの設定で行います。

 File Uploadコントロールは、次の3つのコントロールで構成されます。

Uploadコントロール

 ファイルをWebサーバにアップロードするコントロールです。フォームに配置すると、アップロードするファイル名を入力するエリアと、ファイルを選ぶダイアログボックスを表示するボタンが表示されます。

UploadManagerコントロール

 Upload、ProgressPanelの各コントロールと連動して動作し、アップロード処理を行う非表示のコントロールです。GUIは持ちません。

ProgressPanelコントロール

 アップロードの進行状況に関するデータをリアルタイムに表示するコントロールです。ファイルのアップロードを開始すると表示されます。

3つのコントロール
3つのコントロール

Uploadコントロール

 Uploadコントロールは、AutoPostbackプロパティがTrueに設定されている場合(デフォルトではTrue)、ファイルが選択されると同時にアップロード操作を開始します。 ボタンにはイメージファイルを設定できるので、独自のボタン形状にできます。

ボタンのカスタマイズ(ヘルプファイルより抜粋)
ボタンのカスタマイズ(ヘルプファイルより抜粋)

 ファイルを選択するダイアログボックスを表示する機能はコントロールに組み込まれているので、わざわざ設定する必要はありません。

UploadManagerコントロール

 UploadManagerコントロールでは、SavePathプロパティとTempPathプロパティの設定を組み合わせることで、ファイルのアップロード先を次の3通りのいずれかの方法で構成できます。

  • ファイルデータを一時的なファイル格納場所にストリーミングする…TempPathプロパティとSavePathプロパティの両方を設定すると、まずTempPathに一時ファイルが書き込まれ、その書き込みが終了すると一時ファイルがSavePathに移動される
  • ファイルデータを最終的なファイル格納場所に直接ストリーミングする…SavePathプロパティのみを設定すると、SavePathに直接ファイルがアップロードされる
  • ファイルデータをメモリにストリーミングする…TempPathとSavePathの値を両方ともクリアすると、ファイルがサーバーのメモリにアップロードされる

ProgressPanelコントロール

 ProgressPanelコントロールは、ファイルのアップロードが始まると表示され、個々のファイルのアップロード進行状況を示すバー、アップロード速度、転送されたバイトなどを表示します。ProgressPanelにはオプションでキャンセルボタンが表示され、これを使用すると実行中のファイルアップロード操作を中止できます。

各部の表示内容(ヘルプファイルより抜粋)
各部の表示内容(ヘルプファイルより抜粋)

GUIの作成と設定

 では、早速Webページを作成しましょう。Visual StudioでWebサイトを作成し、ベースとなるページを作成します。

 そして、「Upload」「UploadManager」「ProgressPanel」の3つのコントロールを配置します。

GUIの作成
GUIの作成

アップロード先の指定

 まずは、アップロード先のWebサーバのフォルダを指定しましょう。このWebページでは、Webページのあるフォルダにあるサブフォルダ「App_Data」を、ファイルをアップロードするフォルダに指定します。

 これは、UploadManagerコントロールのSavePathプロパティを使用します。設定するフォルダ名は、HTMLでサブディレクトリを指定するのと同じパスの記述方法を使います。

~/App_Data

 ファイルシステムのパス指定の方法も使用できます。

c:\App_Data

ProgressPanelコントロールの設定

 ProgressPanelコントロールでは、背景色や進行バーのイメージファイルの設定、文字色の設定を行います。ProgressPanelコントロールの背景色は、BackColorプロパティを使用します。各表示文字の色は、ForeColorを使用しますが、このプロパティではコントロールに表示されているすべての文字がこの色になります。

 個々の表示文字の色を別々に設定するには、次のプロパティを展開して表示されるForeColorプロパティを使用します。

表示文字 展開するプロパティ
ステータス表示文字 StatusStyle
進行バー ProgressBarStyle
アップロード中止ボタン CancelButtonStyle

 進行バーの形状に、イメージファイルを設定することで、見栄えの良いバーにすることができます。設定は簡単で、ProgressPanelコントロールのProgressBarImageUrlプロパティに、イメージファイルの場所をURL形式で設定します。

 ここでは、「grad.jpg」という画像ファイルを設定しました。このファイルは、Webページと同じフォルダにおきますので、プロパティの記述方法は次のようになります。

~/grad.jpg

 自動的に、フォルダに配置したProgressPanelコントロールのバーが、このイメージファイルの画像に変わります。

バーの形状が変更される
バーの形状が変更される

Webページのテスト

 たったこれだけの設定で、WebページからファイルをWebサーバにアップロードできます。実際に複数のファイルを選んでアップロードしてみます。

3つのファイルを選んでアップロードする
3つのファイルを選んでアップロードする

 Webページのあるフォルダ内の「App_Data」フォルダにファイルが転送されています。

App_Dataフォルダに格納されている
App_Dataフォルダに格納されている

まとめ

 Webページにコントロールを配置して、プロパティで外観をデザインするだけですぐにファイルアップロード機能を実装できるFile Upload 1.0Jは、とても便利ですぐれもののコントロールです。

 社内LANなどで、ファイルを階層の深いフォルダに頻繁にアップするような業務では、特に威力を発揮するコントロール群と言えます。

製品情報

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5