このトピックは、igUpload
™ コントロールの構成方法をコード例を用いて説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
トピック
igUpload の概要: このトピックは igUpload
コントロールおよびその機能について紹介します。このトピックでは、このコントロールを HTML ページへ追加する方法を示します。
HTTP ハンドラーとモジュールの使用: このトピックは、HTTP モジュールおよび HTTP ハンドラーを構成して、igUpload
コントロールでアップロードされるデータを承諾するのに必要なサーバー イベントを処理する方法をデモします。
外部リソース
このトピックは、以下のセクションで構成されます。
igUpload
コントロールには、特定のニーズに対してカスタマイズできる幅広いオプションがあります。使用できるファイル タイプを制御し、同時にアップロードするファイル数を指定し、ファイル パネルでユーザー操作を構成できます (アップロード可能なファイル数と igUpload
パネルの表示)。また、アップロードが自動的に開始するか明示的なユーザー操作によって開始するかを選択します。詳細については、「igUpload 構成の概要表」 とそれに続くセクションをご参照ください。
以下の表は、igUpload
で構成可能な機能を示します。このメソッドについては、表の下にある解説も参照してください。
構成可能な要素 | 詳細 | プロパティ |
---|---|---|
ファイル選択モード (単一/複数) | ユーザーによるファイル選択が可能かどうか、いつファイルを選択するか、また一度に複数のファイルを選択できるかどうかを構成できます。 | |
トリガーのアップロード (手動/自動) |
ユーザーが igUpload パネルにファイルを追加すると、アップロードが自動的に開始または手動で開始 (ユーザーの Upload ボタン押下によって) するかどうかを構成します。
|
|
許可されるファイル タイプ | ユーザーがアップロードできるファイルのタイプを構成できます。 | |
アップロードするファイルの最大数 | ページの更新ごとにアップロードできる最大ファイル数を構成できます。 | |
同時にアップロードするファイルの最大数の構成 | この設定は、同時ファイル アップロード数のしきい値を構成します。 | |
複数ファイルのアップロードで単一の要求を使用 | この設定はコントロールを単一の HTTP 要求を使用して複数のファイルのアップロードを構成します。 | |
ファイル表示モード |
igUpload コントロールのパネルに表示するファイル数を構成できます。
|
ユーザーによるファイル選択が可能かどうか、いつファイルを選択するか、また一度に複数のファイルを選択できるかどうかを構成できます。この機能は、igUpload
のファイル選択モードにより管理されます。ファイル選択モードは、単一ファイル (ユーザーは 1 パスで 1 ファイル選択可能) または複数ファイル (ユーザーは 1 パスで複数ファイル選択可能) です。
ユーザーは複数ファイル選択モードで以下が可能です。
igUpload
コントロールへドラッグ アンド ドロップ単一ファイル選択モードでは、ファイルの開くダイアログでユーザーが選択できるのは 1 ファイルのみで、ファイルのドラッグ アンド ドロップもできません。複数ファイルをアップロードしたい場合、igUpload
コントロール パネルでファイルを追加する操作を繰り返す必要があります。
以下の画像は、2 通りのファイルを選択する方法を示します。開く ダイアログから複数のファイルを選択して開く (左)、あるいは Windows エクスプローラーから igUpload
コントロールパネル へドラッグ アンド ドロップしてそれらのファイルを開きます (右)。
igUpload
へドロップするデフォルトのファイル選択モードは、単一ファイルです。
ファイル選択モードは、mode および multipleFiles オプションによって管理されます。mode が multiple の場合のみ multipleFiles を true に設定する意味があります。mode が single の場合、multipleFiles は効果がありません。
ファイル選択モード機能は、入力要素の HTML 5 複数属性 を採用します。これにより、機能がブラウザー依存となります。サポートされていないブラウザーが使用されると、機能のプロパティを設定しても効果はありません。つまり、ユーザーは、ファイルを開くダイアログまたは igUpload
コントロールへドラッグ アンド ドロップして複数のファイルを選択することはできません。サポートされるブラウザーの一覧は、要件をご覧ください。
以下は、ファイル選択タイプを構成するための要件です。
この機能は以下のブラウザーでのみ使用できます。
Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|
1.0 またはそれ以降 | 3.6 またはそれ以降 | 10 またはそれ以降 | 10.62 またはそれ以降 | 5 またはそれ以降 |
以下の表では、各プロパティ設定の構成です。
構成可能な要素 | 詳細 | プロパティ |
---|---|---|
ファイル選択モード (単一/複数) | ユーザーによるファイル選択が可能かどうか、いつファイルを選択するか、また一度に複数のファイルを選択できるかどうかを構成できます。 |
これは、以下の設定の結果として複数のファイル選択を有効にする方法の例です。
プロパティ | 値 |
---|---|
mode | "multiple" |
multipleFiles | true |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#upload1').igUpload({
mode: 'multiple',
multipleFiles: true
});
ASPX の場合:
@(Html.Infragistics().Upload()
.MultipleFiles(true)
.Mode(UploadMode.Multiple)
.Render()
)
ユーザーが igUpload
パネルにファイルを追加すると、アップロードが自動的に開始または手動で開始 (ユーザーの Upload ボタン押下によって) するかどうかを構成します。igUpload
コントロールの機能は、アップロード トリガーと呼ばれます。アップロード トリガーは、ファイル アップロードの自動スタートを有効または無効にします。
デフォルト アップロード トリガーは手動です。
アップロード トリガーは、igUpload
コントロールの autostartupload オプションによって管理されます。
以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
自動アップロードを有効にする | autostartupload | true |
自動アップロードを無効にする | autostartupload | false |
これは、以下の設定の結果として自動アップロードを有効にする方法の例です。
プロパティ | 値 |
---|---|
autostartupload | true |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#upload1').igUpload({
autostartupload: true
});
ASPX の場合:
@(Html.Infragistics().Upload()
.AutoStartUpload(true)
.Render()
)
ユーザーがアップロードできるファイルのタイプを構成できます。この機能は、許容されるファイル タイプの一覧で使用可能なファイル タイプのファイル名拡張子を明示的にリストして処理されます。このリストは、allowedExtensions プロパティの値として使用可能なファイル拡張子を表す文字列の配列として設定されます。
デフォルトですべてのファイル タイプが更新できます。
ファイル拡張子の検証では、選択されたファイル拡張子を allowedExtenstions
プロパティで宣言された拡張子の一覧と比較します。拡張子の検証が失敗すると、igUpload
の onError イベントが発生します。onError ハンドラーの 2 つ目のパラメーターは、プロパティ errorCode = 2
および errorMessage = “ファイル拡張子の検証に失敗しました。”
のあるオブジェクトを含みます。ユーザーに表示するエラーはカスタマイズ可能です。
以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
許可する拡張子を定義します。 | allowedExtensions | 許可されるファイル拡張子を表す文字列の配列 |
この例は、.xls および .doc ファイルのアップロードを許可するユーザーを設定する方法を示します。
プロパティ | 値 |
---|---|
allowedExtensions | ["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 = “アップロードが可能な最大ファイル数を超えました。”
のあるオブジェクトを含みます。ユーザーに表示するエラーはカスタマイズ可能です。
以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
最大アップロード ファイル数を設定 | maxUploadedFiles | 必要な整数値 |
これは、最大ファイル アップロード数を 2 に設定します。
プロパティ | 値 |
---|---|
maxUploadedFiles | 2 |
以下の画像は、最大ファイル アップロード数に達した結果として、追加ボタンを無効にする方法を示します。
以下のコードはこの例を実装します。
JavaScript の場合:
$('#upload1').igUpload({
maxUploadedFiles: 2
});
ASPX の場合:
@(Html.Infragistics().Upload()
.MaxUploadedFiles(2)
.Render()
)
同時にアップロードできる最大ファイル数を構成できます。
アップロードするファイルが最大許容数より多い場合、アップロードするファイル数の数がその数を下回るまで、残りのファイルがスタンバイの間、最大数のファイルが同時にアップロードされます (先着ベース)。
同時アップロード可能な最大ファイル数は maxSimultaneousFilesUploads プロパティで管理されます。
以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
同時ファイル アップロードの最大数を設定します。 | maxSimultaneousFilesUploads | 必要な整数値 |
以下のコード サンプルでは、最大ファイル アップロード数を設定する方法を示します。
プロパティ | 値 |
---|---|
maxSimultaneousFilesUploads | 2 |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#upload1').igUpload({
maxSimultaneousFilesUploads: 2
});
ASPX の場合:
@(Html.Infragistics().Upload()
.MaxSimultaneousFilesUploads(2)
.Render()
)
複数ファイルのアップロード処理がファイルごとの要求またはすべてのファイルを単一の要求で送信するかどうかを構成できます。
以下の表では、各プロパティ設定の構成です。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
複数ファイルをファイルごとの要求でアップロードします。 | useSingleRequest | false (デフォルト) |
複数のファイルを単一の要求でアップロードします。 | useSingleRequest | true |
以下のコード例は、複数ファイルのアップロードに単一の要求を使用するための設定方法を紹介します。
プロパティ | 値 |
---|---|
useSingleRequest | true |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#upload1').igUpload({
useSingleRequest: true
});
ASPX の場合:
@(Html.Infragistics().Upload()
.useSingleRequest(true)
.Render()
)
igUpload
コントロールのパネルに表示するファイル数を構成できます。この機能は、igUpload
のファイル表示モードにより管理されます。ファイル選択モードは、単一ファイル (パネルに 1 ファイルのみ表示) または複数ファイル (パネルに表示される複数ファイル)。
複数ファイル モードは、パネルに複数のファイルを垂直に表示します。
単一ファイル モードでは、一度に 1 ファイルのみ表示できます。
以下の画像は、単一ファイル モードと複数ファイル モードを比較します。
---|---
デフォルトのファイル選択モードは、単一ファイルです。
複数ファイルモードで表示されるファイル数は、maxUploadedFiles で設定された数を超えることはできません。
以下の表では、任意の構成とプロパティ設定のマップを示します。 プロパティ設定
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
表示モードを単一ファイルに設定する | mode | single |
表示モードを複数ファイルに設定する | mode | "multiple" |
この例は、表示モードを複数ファイルに設定する方法を示します。これは以下の設定の結果です。
プロパティ | 値 |
---|---|
mode | "multiple" |
以下のコードはこの例を実装します。
JavaScript の場合:
$('#upload1').igUpload({
mode: 'multiple'
});
ASPX の場合:
@(Html.Infragistics().Upload()
.Mode(UploadMode.Multiple)
.Render()
)
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub