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

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

GUIの作成と設定

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

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

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つのファイルを選んでアップロードする

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

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

まとめ

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

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

製品情報

• File Upload 1.0J