igUpload の構成

トピックの概要

目的

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

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

トピック

• igUpload の概要: このトピックは igUpload コントロールおよびその機能について紹介します。このトピックでは、このコントロールを HTML ページへ追加する方法を示します。

• HTTP ハンドラーとモジュールの使用: このトピックは、HTTP モジュールおよび HTTP ハンドラーを構成して、igUpload コントロールでアップロードされるデータを承諾するのに必要なサーバー イベントを処理する方法をデモします。

外部リソース

• W3C: HTML ファイル型の入力

このトピックの内容

このトピックは、以下のセクションで構成されます。

• igUpload 構成の概要
  • igUpload 構成の概要
  • igUpload 構成の概要表
• ファイル選択モードの構成 (単一/複数)
  • 概要
  • 要件
  • プロパティ設定
  • 例
• アップロード トリガーの構成 (手動/自動)
  • 概要
  • プロパティ設定
  • 例
• 許可されるファイル タイプの構成
  • 概要
  • プロパティ設定
  • 例
• アップロードするファイルの最大数を構成
  • 概要
  • プロパティ設定
  • 例
• 同時にアップロードするファイルの最大数の構成
  • 概要
  • プロパティ設定
  • 例
• 複数ファイルのアップロードで単一の要求を使用するための構成
  • 概要
  • プロパティ設定
  • 例
• ファイル表示モードの構成
  • 概要
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック
  • サンプル

igUpload 構成の概要

igUpload 構成の概要

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

igUpload 構成の概要表

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

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

概要

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

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

• ファイルの開くダイアログから複数ファイルを選択。
• ファイルを Windows® Explorer からigUpload コントロールへドラッグ アンド ドロップ

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

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

ファイルを開くダイアログで複数のファイルの選択する

選択したファイルを Windows エクスプローラーから igUpload へドロップする

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

ファイル選択モードは、mode および multipleFiles オプションによって管理されます。mode が multiple の場合のみ multipleFiles を true に設定する意味があります。mode が single の場合、multipleFiles は効果がありません。

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

要件

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

• 入力要素の HTML 5 複数属性をサポートするブラウザー

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

プロパティ設定

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

例

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

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

JavaScript の場合:

$('#upload1').igUpload({ 
    mode: 'multiple', 
    multipleFiles: true
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .MultipleFiles(true)
    .Mode(UploadMode.Multiple)
    .Render()
)

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

概要

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

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

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

プロパティ設定

以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定

例

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

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

JavaScript の場合:

$('#upload1').igUpload({ 
    autostartupload: true
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .AutoStartUpload(true)
    .Render()
)

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

概要

ユーザーがアップロードできるファイルのタイプを構成できます。この機能は、許容されるファイル タイプの一覧で使用可能なファイル タイプのファイル名拡張子を明示的にリストして処理されます。このリストは、allowedExtensions プロパティの値として使用可能なファイル拡張子を表す文字列の配列として設定されます。

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

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

プロパティ設定

以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定

例

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

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

JavaScript の場合:

$("#upload1").igUpload({
    allowedExtensions : ["xls","doc"]
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .AllowedExtensions(new List<string> { "xls", "doc"})
    .Render()
)

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

概要

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

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

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

プロパティ設定

以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定

例

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

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

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

JavaScript の場合:

$('#upload1').igUpload({ 
    maxUploadedFiles: 2
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .MaxUploadedFiles(2)
    .Render()
)

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

概要

同時にアップロードできる最大ファイル数を構成できます。

アップロードするファイルが最大許容数より多い場合、アップロードするファイル数の数がその数を下回るまで、残りのファイルがスタンバイの間、最大数のファイルが同時にアップロードされます (先着ベース)。

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

プロパティ設定

以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定

例

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

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

JavaScript の場合:

$('#upload1').igUpload({ 
    maxSimultaneousFilesUploads: 2
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .MaxSimultaneousFilesUploads(2)
    .Render()
)

複数ファイルのアップロードで単一の要求を使用するための構成

概要

複数ファイルのアップロード処理がファイルごとの要求またはすべてのファイルを単一の要求で送信するかどうかを構成できます。

プロパティ設定

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

例

以下のコード例は、複数ファイルのアップロードに単一の要求を使用するための設定方法を紹介します。

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

JavaScript の場合:

$('#upload1').igUpload({ 
    useSingleRequest: true
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .useSingleRequest(true)
    .Render()
)

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

概要

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

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

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

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

単一ファイル モード

---|---

複数ファイル モード

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

複数ファイルモードで表示されるファイル数は、maxUploadedFiles で設定された数を超えることはできません。

プロパティ設定

以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定

例

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

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

JavaScript の場合:

$('#upload1').igUpload({ 
    mode: 'multiple'
});

ASPX の場合:

@(Html.Infragistics().Upload()
    .Mode(UploadMode.Multiple)
    .Render()
)

関連コンテンツ

トピック

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

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

サンプル

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

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

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

• 進行状況の表示: このサンプルは、igUpload コントロールに対し、最大アップロード ファイル数と最大同時ファイル アップロード数を設定する例を示します。