バージョン

WebUpload アップロード

トピックの概要

目的

このトピックは、コード例を示して、 WebUpload™ コントロールを構成する方法を説明します。

前提条件

このトピックを理解するためには、以下のトピックを理解しておく必要があります。

トピック 目的

このトピックは WebUpload コントロールおよびその機能について紹介します。このトピックでは、コントロールを ASPX ページに追加する方法について説明します。

このトピックは、HTTP モジュールおよび HTTP ハンドラーを構成し、 WebUpload コントロールでアップロードされたデータを受け入れるサーバー イベントを処理する方法を示します。

WebUpload 構成の概要

WebUpload 構成の要約

WebUpload コントロールは、多数のカスタマイズ オプションがあります。使用できるファイル タイプを制御、同時にアップロードするファイル数の指定、ファイル パネルでユーザー操作を構成できます (アップロード可能なファイル数と WebUpload パネル の表示)。また、アップロードが自動的に開始するか明示的なユーザー操作によって開始するかを選択します詳細については、WebUpload 構成概要図 とそれに続くセクションをご参照ください。

WebUpload 構成の概要図

以下の表は、 WebUpload で構成可能な機能を示します。このメソッドについては、表の下にある解説もご参照ください。

構成可能な要素 詳細 プロパティ

ユーザーによるファイル選択が可能かどうか、いつファイルを選択するか、また一度に複数のファイルを選択できるかどうかを構成できます。

ユーザーが WebUpload パネルにファイルを追加すると、アップロードが自動的に開始または手動で開始 (ユーザーの Upload ボタン押下によって) するかどうかを構成します。

ユーザーがアップロードできるファイルのタイプを構成できます。

ページの更新ごとにアップロードできる最大ファイル数を構成できます。

この設定は、同時ファイル アップロード数のしきい値を構成します。

WebUpload コントロールのパネルに表示するファイル数を構成できます。

ファイル選択モードの構成 (単一/複数)

概要

ユーザーによるファイル選択が可能かどうか、いつファイルを選択するか、また一度に複数のファイルを選択できるかどうかを構成できます。この機能は、 WebUpload のファイル選択モードで管理されます。ファイル選択モードは、単一ファイル (ユーザーは 1 パスで 1 ファイル選択可能) または複数ファイル (ユーザーは 1 パスで複数ファイル選択可能) です。

ユーザーは複数ファイル選択モードで以下が可能です。

  • ファイル Open ダイアログから複数ファイルを選択。

  • ファイルを Windows® Explorer から WebUpload コントロールへドラッグ アンド ドロップ

単一ファイル選択モードでは、Open ダイアログでユーザーが選択できるのは 1 ファイルのみで、ファイルのドラッグ アンド ドロップもできません。複数ファイルをアップロードしたい場合、 WebUpload コントロール パネルでファイルを追加する操作を繰り返す必要があります。

以下の画像は、2 通りのファイルを選択する方法を示します。開く ダイアログから開く、あるいは Windows エクスプローラーから WebUpload コントロールパネルへドロップして複数のファイルを開きます。

ファイルを 開く ダイアログで複数のファイルの選択する 選択したファイル Windows エクスプローラーから WebUpload へをドロップします
Configuring WebUpload 1.png
Configuring WebUpload 2.png

デフォルトのファイル選択モードは、単一ファイルです。

ファイル選択モードは、 Mode および MultipleFiles オプションによって管理されます。 Mode  が Multiple の場合のみ MultipleFilestrue に設定にする意味があります。 Mode単一 の場合、 MultipleFiles  は効果がありません。

ファイル選択モード機能は、input 要素の HTML 5 複数属性 を採用します。これにより、機能がブラウザー依存となります。サポートされていないブラウザーが使用されると、機能のプロパティを設定しても効果はありません。つまり、ユーザーは、ファイルを開くダイアログまたは WebUpload コントロールへドラッグ アンド ドロップして複数のファイルを選択することはできません。サポートされるブラウザーの一覧は、要件をご覧ください。

要件

以下は、ファイル選択タイプを構成するための要件です。

  • input 要素の HTML 5 multiple 属性をサポートするブラウザー

この機能は以下のブラウザーでのみ使用できます。

Chrome Firefox Internet Explorer Opera Safari

1.0 またはそれ以降

3.6 またはそれ以降

10 またはそれ以降

10.62 またはそれ以降

5 またはそれ以降

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的: 使用するプロパティ: 設定値

ファイル選択モードを複数ファイルに設定する

  • “Multiple”

  • True

ファイル選択モードを Single ファイルに設定する

  • “Single”

これは、以下の設定の結果として複数のファイル選択を有効にする方法の例です。

プロパティ

Mode

"Multiple"

MultipleFiles

True

Configuring WebUpload 1.png

以下のコードはこの例を実装します。

ASPX の場合:

<ig:WebUpload ID="WebUpload1" runat="server" Mode="Multiple" MultipleFiles="True">
</ig:WebUpload>

アップロード トリガーの構成 (手動/自動)

概要

ユーザーが WebUpload パネルにファイルを追加すると、アップロードが自動的に開始または手動で開始 (ユーザーの Upload ボタン押下によって) するかどうかを構成します。 WebUpload コントロールの機能は、アップロード トリガーと呼ばれます。アップロード トリガーは、ファイル アップロードの自動スタートを有効または無効にします。

デフォルト アップロード トリガーは手動です。

アップロード トリガーは、 WebUpload コントロールの AutoStartUpload オプションによって管理されます。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的: 使用するプロパティ: 設定値

自動アップロードを有効にする

True

自動アップロードを無効にする

False

これは、以下の設定の結果として自動アップロードを有効にする方法の例です。

プロパティ

True

以下のコードはこの例を実装します。

ASPX の場合:

<ig:WebUpload ID="WebUpload1" runat="server" AutoStartUpload="True">
</ig:WebUpload>

許可されるファイル タイプの構成

概要

ユーザーがアップロードできるファイルのタイプを構成できます。この機能は、許容されるファイル タイプの一覧で使用可能なファイル タイプのファイル名拡張子を明示的にリストして処理されます。このリストは、 AllowedExtensions プロパティの値として使用可能なファイル拡張子を表す FileUploadExtension オブジェクトのコレクションです。

デフォルトですべてのファイル タイプが更新できます。

ファイル拡張子の検証は、選択されたファイル拡張子を AllowedExtenstions プロパティで宣言された拡張子の一覧と比較します。拡張子の検証が失敗すると、 WebUploadonError イベントが発生します。 onError ハンドラーの 2 つ目のパラメーターは、プロパティ errorCode = 2 および errorMessage = “ファイル拡張子の検証に失敗しました。” のあるオブジェクトを含みます。ユーザーに表示するエラーはカスタマイズ可能です。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的: 使用するプロパティ: 設定値

許可する拡張子を定義します。

FileUploadExtension オブジェクトのコレクション。

この例は、.xls および .doc ファイルのアップロードを許可するユーザーを設定する方法を示します。

プロパティ

FileUploadExtension オブジェクトのコレクション。

Configuring WebUpload 4.png

以下のコードはこの例を実装します。

ASPX の場合:

<ig:WebUpload ID="WebUpload1" runat="server">
    <AllowedExtensions>
        <ig:FileUploadExtension Extension="doc" />
        <ig:FileUploadExtension Extension="xls" />
    </AllowedExtensions>
</ig:WebUpload>

アップロードするファイルの最大数を構成

概要

ページの更新ごとにアップロードできる最大ファイル数を構成できます。制限に達すると、 WebUpload コントロール パネルの 追加ボタンが無効になります。ファイル選択モードが複数の場合、最大ファイル数を超えてファイルを選択するとエラーがスローされます。

デフォルトでは、アップロードするファイル数に制限はありません。

MultipleFiles = True の場合、ユーザーがこのしきい値を超えてファイルを選択すると WebUpload onError イベントが発生します。 onError ハンドラーの 1 つ目のパラメーターは、プロパティ errorCode = 2 および errorMessage = “アップロードが可能な最大ファイル数を超えました。” のあるオブジェクトを含みます。ユーザーに表示するエラーはカスタマイズ可能です。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的: 使用するプロパティ: 設定値

最大アップロード ファイルを設定します

望ましい整数値

これは、最大ファイル アップロード数を 2 に設定します。

プロパティ

2

以下の画像は、最大ファイル アップロード数に達した結果として、追加 ボタンを無効にする方法を示します。

Configuring WebUpload 5.png

以下のコードはこの例を実装します。

ASPX の場合:

<ig:WebUpload ID="WebUpload1" runat="server" MaxUploadedFiles="2">
</ig:WebUpload>

同時にアップロードするファイルの最大数の構成

概要

同時にアップロードするファイル数を制限できます。しきい値を超えてファイルを選択すると、同時アップロードファイル数をこのしきい値に制限します。先着順で、アップロードされるファイルがしきい値以下になるまで超過ファイルのアップロードを停止します。この処理は、他のファイルのアップロードが完了するについれて、同時アップロードに追加されている残りの各ファイルで実行されます。

同時アップロード可能な最大ファイル数は MaxSimultaneousFilesUploads プロパティで管理されます。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的: 使用するプロパティ: 設定値

同時ファイル アップロードの最大数を設定します。

望ましい整数値

以下のコード サンプルでは、最大ファイル アップロード数を設定する方法を示します。

プロパティ

2

Configuring WebUpload 6.png

以下のコードはこの例を実装します。

ASPX の場合:

<ig:WebUpload ID="WebUpload1" runat="server" MaxSimultaneousFilesUploads="2">
</ig:WebUpload>

ファイル表示モードの構成

概要

WebUpload コントロールのパネルに表示するファイル数を構成できます。この機能は、 WebUpload のファイル表示モードで管理されます。ファイル選択モードは、単一ファイル (パネルに 1 ファイルのみ表示) または複数ファイル (パネルに表示される複数ファイル)。

複数ファイル モードは、パネルに複数のファイルを垂直に表示します。

単一ファイル モードでは、一度に 1 ファイルのみ表示できます。

以下の画像は、単一ファイル モードと複数ファイル モードを比較します。

単一ファイル モード 複数ファイル モード
Configuring WebUpload 7.png
Configuring WebUpload 8.png

デフォルトのファイル選択モードは、単一ファイルです。

複数ファイルモードで表示されるファイル数は、 MaxUploadedFiles で設定された数を超えることはできません。状況に従い MaxUploadedFiles 設定の結果は以下となります。

  • MultipleFiles = False の場合、ファイル数が MaxUploadedFiles の設定と同じになると自動的にボタンを無効にします。

  • MultipleFiles = True の場合、選択したファイル数が MaxUploadedFiles の設定を超えるとエラーをスローします。

プロパティ設定

以下の表では、各プロパティ設定の構成です。

目的: 使用するプロパティ: 設定値

表示モードを単一ファイルに設定する

Single

表示モードを複数ファイルに設定する

Multiple

この例は、表示モードを複数ファイルに設定する方法を示します。これは以下の設定の結果です。

プロパティ

" Multiple "

Configuring WebUpload 8.png

以下のコードはこの例を実装します。

ASPX の場合:

<ig:WebUpload ID="WebUpload1" runat="server" Mode="Multiple">
</ig:WebUpload>

関連コンテンツ

トピック

このトピックにの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックは、アップロード ファイルをファイルまたはメモリストリームとして処理し、保存する方法を説明します。詳細な手順は、各プロセスでメモリストリームとしてファイルの一部を保存トピックをご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

サンプル 目的

このサンプルは、 WebUpload のアップロード自動開始オプションの設定を示します。

このサンプルは、 WebUpload の複数ファイルアップロードの構成を示します

このサンプルは、最大アップロード ファイル数と最大同時ファイル アップロード数を設定する例を示します。