imuiFileUpload
コンポーネント情報 | |
---|---|
モジュール | im_ui |
導入されたバージョン | 8.0.2 |
バージョン | 8.0.12 |
機能説明
ストレージサービスへのファイルのアップロードを行います。
- アップロードするファイルの選択方法は以下の2通りです。
- 「ファイル選択」ボタンをクリックし、ファイル選択ダイアログからファイルを選択する
- デスクトップなどからドラッグアンドドロップする
- ドロップできるのは、ファイル追加、開始、中断、削除ボタンが並んでいる領域およびファイル一覧の領域です。
- 対応ブラウザは クライアント要件 の通りです。
- 提供する機能は以下の通りです。
- 選択したファイルを個別にアップロード
- 選択したファイルの一括アップロード
- 送信の中断
- アップロードしたファイルの削除
- 自動アップロード
- ファイルを選択すると同時に、自動的にファイルをアップロードします。
- このタグを使用したファイルアップロードはAjaxを利用します。
- このため、formタグのaction属性に指定したURLへ画面遷移しません。
- 画面遷移したい場合はコールバック関数を定義し、定義した関数の中で画面遷移を行う必要があります。
- アプリケーションサーバの設定によって、アップロード可能なファイルサイズが制限されます。
- このタグや、ほかの方法でアップロードされているHTMLファイルをダウンロードする機能を提供すると、ダウンロードするファイルにテーマが適用され、想定したファイルがダウンロードできません。
- 回避するにはテーマを適用しないような実装が必要です。詳細はテーマ仕様書の「PageBuilder」を参照してください。
- IE8、IE9 をお使いの場合は以下の制限があります。
- ドラッグアンドドロップでのファイル選択が利用できません。
- type=“file”のmultiple属性に対応していないため、ファイルを複数選択することができません。
- File API が実装されていないため size を取得することができません。
- onRemoveなどコールバック関数に渡される引数のうち、dataには説明していないプロパティが多数存在しています。
- 実装の仕方によって異なったり、jQueryプラグイン内部で使用したりする値なので、変更しないでください。
属性一覧
- ファイルをアップロードするには、保存先を指定する必要があります。以下の3つの保存先を示す属性のうちいずれか1つだけを指定してください。
- storeTo
- url
- outerFormId
- 複数指定してしまった場合、これらの値の優先度は以下のようになります。例えば、outerFormIdとurlを同時に指定した場合、urlは無視されます。
- 優先度高
- outerFormId
- url
- storeTo
- 優先度低
- 優先度高
注釈 | 属性名 | 型 | 説明 | 省略時の動作 |
---|---|---|---|---|
acceptFileTypes |
string | アップロードを許可するファイル種別の正規表現文字列 | /.+$/i | |
Boolean属性 | autoUpload |
boolean | ファイル選択後に自動的にアップロードするかどうかのフラグ | false |
無害化 | dropZone |
string | ファイルアップロード可能なdropエリアのjQueryセレクタ(idなら“#id”、classなら“.class”) | 自分自身のエレメントの ID |
Boolean属性 | enableDelete |
boolean | アップロード完了したファイルを削除するボタンを表示するかどうかのフラグ | false |
Boolean属性 | fileNameEditable |
boolean | アップロード前にファイル名を編集するかどうかのフラグ(自動アップロード時は設定不可) | false |
無害化 | fileNameInputWidth |
number | ファイル名入力テキストボックスの幅(単位:px) | 150 |
HTML5
Boolean属性
|
hidden |
boolean | このタグを非表示にします | false |
id |
string | 生成されるform要素のid | 代替idを付与 | |
inputName |
string | 生成されるinput[type=file]要素のname 本属性は Ver.8.0.12 以降のバージョンで使用可能です |
local_file | |
maxNumberOfFiles |
number | アップロード可能ファイル数(1以上の数値) | 無制限 | |
name |
string | 生成されるform要素のname | 代替nameを付与 | |
HTML5
Boolean属性
|
novalidate |
boolean | 入力されたデータの妥当性を確認しない(true:確認しない、false:確認する) | false |
無害化 | onBeforeRemove |
string | アップロードしたファイルのDelete実行前に呼び出されるCSJSの関数名 本属性は Ver.8.0.12 以降のバージョンで使用可能です |
- |
無害化 | onBeforeSend |
string | アップロード直前に呼び出されるCSJSの関数名 | - |
無害化 | onCancel |
string | 選択したファイルのキャンセルボタン押下時に呼び出されるCSJSの関数名 | - |
無害化 | onError |
string | アップロード失敗時に呼び出されるCSJSの関数名 | - |
無害化 | onRemove |
string | アップロードしたファイルのDelete実行時に呼び出されるCSJSの関数名 | - |
無害化 | onSuccess |
string | アップロード成功時に呼び出されるCSJSの関数名 | - |
無害化 | outerFormId |
string | このタグの外側にformがある場合のformタグのid | - |
無害化 | storeTo |
string | 保存先ディレクトリ(SessionScopeStorageをルートとした相対パスを指定する) | - |
Boolean属性 | uniqueFileName |
boolean | 保存先を storeTo で指定した際に、サーバに保存するファイル名を自動生成した一意なファイル名にするかどうかのフラグ このフラグを有効にすると、クライアント側にクライアント側で指定したファイル名とサーバ側で自動生成したファイル名の双方が送信されます 詳細は アップロードするファイルの保存先をstoreToで指定する2 を参照してください 本属性は Ver.8.0.4 以降のバージョンで使用可能です |
false |
無害化 | url |
string | 保存先URL(urlとstoreToが同時に指定された場合、urlを優先する) | - |
無害化 | その他 |
string | ユーザ定義属性(生成されるformタグの属性として出力される) | - |