スクリプト開発向けタグライブラリ

upload非推奨

imuiFileupload タグに置き換えられました。
コンポーネント情報
モジュールim_jssp
導入されたバージョン7.2以前
バージョン8.0.0

機能説明

<IMART type=“upload”>タグ。

ファイルアップロードのためのコンポーネントを表示します。
このコンポーネントを用いる事で、ドラッグ＆ドロップ操作によるファイルアップロード処理を実現する事が可能です。

ファイルアップロードコンポーネントは、アップロードするファイルの一覧を表示するための領域で構成され、 ファイルの一覧には、アイコンとファイル名および削除ボタンが表示されます。
アップロードするファイルを選択するために、ドラッグ＆ドロップ操作が利用可能で、 デスクトップからコンポーネントにファイルをドロップすることでアップロードファイルを追加できます。

追加されたファイルはクライアントサイドJavaScript(CSJS) APIを利用することで任意のタイミングで送信が可能ですが、 ファイルの送信処理はブラウザのサブミット処理とは別に非同期で送信されるため、 ブラウザの操作と同期させたい場合は、 callback 属性でユーザが作成したCSJS関数を指定して、 コールバック関数が呼び出されるまでブラウザの操作を待機することで行ってください。

（例） 
// コールバック関数の処理 
function onUpload(request) {
	 if (request.type == “prepared”) { 
	 	// コンポーネントの無効化 
	 	request.getSource().setEnabled(false); 
	 } else if (request.type == “uploaded”) { 
	 		： 
	 	// コンポーネントの有効化 
	 	request.getSource().setEnabled(true); 
	 } else if (request.type == “error”) { 
	 		:   
	 // コンポーネントの有効化 
	  request.getSource().setEnabled(true); 
	 } 
}
未指定の属性に関しては、既定の値が設定されます。
属性のうちのいくつかは、システムの初期設定として以下のファイルに定義することが可能です。
${Webサーバコンテキストパス}/upload/jp/co/intra_mart/foundation/upload/config/UploadAppletConfig.xml
本機能は、Java Appletを利用して実装されています。
そのためこのコンポーネントを利用するためには、ブラウザにJava Plug-Inをインストールする必要があります。 もしブラウザのPlug-In機能が有効で、まだJava Plug-Inがインストールされていない場合、 Java Plug-Inのインストールを促すメッセージが表示されます。
ただし、ブラウザによってはコンポーネントの利用ができない場合があります。

Plug-Inが利用できない環境、または、本機能が未対応のブラウザ( * )では、<input type=“file”>タグが表示されます。
rows 属性が指定されている場合、指定された数の<input type=“file”>タグが配置されます。
コンポーネントが利用できない場合はCSJSのAPIも利用できないため、利用可能／不可能をチェックして処理を切り替える必要があります。 CSJS APIを利用する場合は、 document.applets オブジェクトが存在するかをチェックしてから利用するようにしてください。

 if (document.applets) { 
		// ファイルアップロードコンポーネントの操作 
	} else { 
		//<input type=“file”>タグの操作 
	}
カスタムタグの属性では、コンポーネントの表示・動作の初期設定を行います。 属性で指定した値のほとんどは、CSJS APIを利用して設定したり、変更したりすることが可能です。
また、ファイルの送信やファイル名の取得などのコンポーネントの操作は、CSJS APIを利用して行います。
そのため、 upload タグを利用するためには、合わせてCSJS APIのドキュメントを参照する必要があります。 CSJS APIについては、「クライアントサイドJavaScript API」の「 im_upload_applet.js 」を参照してください。

＜サポートするブラウザについて＞

ファイルアップロードコンポーネントがサポートするブラウザは、以下のブラウザです。
  • Internet Explorer
  • Firefox
サポートするバージョンは、「リリース・ノート」を参照してください。

＜文字エンコーディングについて＞

ファイルアップロードコンポーネントは、レスポンスに設定された文字エンコーディングを利用してリクエストパラメータ名およびファイル名を送信します。

そのため、アップロードするファイル名に、指定した文字エンコーディングがサポートしていない文字が含まれる場合、 コンポーネント上で表示はされますが、正しくファイルがアップロードできない場合があります。

例えば、レスポンスに設定された文字エンコーディングが「Windows-31J」の場合、 ファイル名に以下の文字が含まれると文字化けが発生し、正しくファイルがアップロードできません。
  •  「−」 - (0x2212 Minus Sign) 
  •  「〜」 - (0x301C Wave Dash) 
  •  「‖」 - (0x2016 Double Vertical Line) 
  •  「¦」 - (0x00A6 Broken Bar) 
  •  「—」 - (0x2014 Em Dash)

もし、これらの文字を利用する場合、文字エンコーディングに「UTF-8」を指定してサーバを構築するようにしてください。

＜JIS2004対応について＞

JIS2004で追加・変更された文字を表示するためには、サーバ環境とクライアント環境のそれぞれで対応が必要です。

サーバ環境では、intra-mart WebPlatform/AppFrameworkがUTF-8で構築されている必要があります。
それ以外の文字エンコーディングで構築されている場合、アップロードするデータの文字エンコーディングが構築された文字エンコーディングとなるため、 正常にアップロードできない可能性があります。

クライアント環境では、それぞれのクライアントに対してJIS2004対応が必要です。
クライアント環境がJIS2004対応されていない場合、ファイルのパスにJIS2004で追加・変更された文字が含まれていると、対象の文字が正常に表示されません。 （ただしその場合でもファイルのアップロードは正常に実行されます。）

設定方法については、「JIS2004対応ガイド」-「クライアントのJavaアプリケーションでJIS2004対応を行う場合」を参照してください。

属性一覧

注釈 属性名 型 説明 省略時の動作
accept アップロード可能なファイルの種別。アップロード可能なファイル名を指定します。 ワイルドカード(“*”)を利用した、ファイル名のパターンをスペース区切りで複数指定可能です。
このプロパティに一致しないファイルは、コンポーネントにドロップしてもファイルの一覧に追加されません。

例:

accept="*.jpg *.png"

指定しない場合、全てのファイルがアップロード可能となります。

（エスケープ対象の属性です） 		-
action 送信先URLを指定します。
送信先URLは、以下の順で解釈され、設定されます。
  1. page属性 - スクリプト開発モデルで作成されたページパス
  2. action属性 - URL文字列
送信先URLが指定されない場合ファイル送信ができませんので、 送信前に必ずCSJSの ImUploadApplet#setAction(String) 関数を利用して設定してください。
送信先が、im-JavaEE Frameworkで作成したサービスの場合、以下のようなURLを「action」属性に指定してください。
action="<アプリケーションID>-<サービスID>.service
-
auto 自動送信の有無。
「true」の場合、ファイルのドロップと同時に送信されます。
ただし、「delay」属性が指定されている場合は、指定された時間が経過後に送信されます。
（エスケープ対象の属性です） 		-
button 削除ボタンの有効化状態。
「false」を設定した場合、ファイル一覧の削除ボタンは非表示となります。
ImUploadApplet#setEnableRemoveButton(Boolean) 関数を利用して、削除ボタンの表示状態を変更することが可能です。
指定しない場合、削除ボタンは表示されます。
削除ボタンが表示されていない場合も、「Delete」キーを押下することで削除が実行可能です。		 -
callback 送信結果受信用コールバック関数名。
CSJSの ImUploadRequestInfo オブジェクトを引数とする関数の名前を指定します。
引数 ImUploadRequestInfo オブジェクトのプロパティについては、CSJSのAPIを参照してください。

例: 

 // コールバック関数の定義 function onUpload (requestInfo) {
	if (requestInfo.type ==“uploaded”) { 
	 	document.responseForm.resultText.value = requestInfo.response; 
	} else if (requestInfo.type ==“error”) { 
		alert(requestInfo.message); 
	} 
}<!-- タグの指定 -->
<IMART type=“upload”... callback="onUpload" ></IMART>
（エスケープ対象の属性です） 		-
cols コンポーネントの幅。
文字数で指定します。
指定しない場合、デフォルトの値（40）が利用されます。		 -
delay 送信遅延時間。
「auto」属性で「true」が指定された場合、ファイルをドロップしてから送信を開始するまでの遅延時間（ミリ秒）を設定します。
指定しない場合、即時送信されます。		 -
enabled コンポーネントの有効化状態。
「false」を設定した場合、コンポーネントは無効化状態となり、ファイルのドロップもアップロードも実行できません。
ImUploadApplet#setEnabled(Boolean) 関数を利用して、コンポーネントの有効化状態を変更することが可能です。
指定しない場合、コンポーネントは有効です。		 -
escapeJs JavaScriptエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が JavaScriptエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の JavaScriptエスケープ処理は行われません。
未指定の場合は「現在実行中の プレゼンテーション・ページ に紐づくescapeJsの値」に則ってJavaScriptエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。		 -
escapeXml XMLエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が XMLエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の XMLエスケープ処理は行われません。
未指定の場合は、「現在実行中の プレゼンテーション・ページ に紐づくescapeXmlの値」に則ってXMLエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。		 -
icon アイコンの有効化状態。
「false」を設定した場合、ファイル一覧のアイコンは非表示となります。
ImUploadApplet#setEnableIcon(Boolean) 関数を利用して、アイコンの表示状態を変更することが可能です。
指定しない場合、アイコンは表示されます。		 -
必須
id このコンポーネントのID。
ImUploadApplet のCSJS APIを利用する場合、IDを利用して以下のように呼び出します。
var cols = document.<id属性の値>.getCols();
またname属性が指定されなかった場合、送信ファイルのリクエストパラメータ名にもなります。
（エスケープ対象の属性です） 		-
interval 送信イベントのコールバック関数の呼び出し間隔。
送信イベントのうち、送信完了までに呼び出されるuploading（送信中）イベントの呼び出し間隔を設定します。
指定しない場合、uploading（送信中）イベントは呼び出されません。		 -
maxRequestLength アップロード可能な最大リクエストサイズ。
アップロード可能な最大のリクエストサイズをバイト単位で指定します。
maxSize 属性とは異なり、全てのリクエストパラメータの合計サイズを指定するため、 複数のファイルを追加した場合は、全てのファイルサイズが合計されて比較されます。
指定しない場合、Application Runtime で指定された「リクエストクエリの長さ」、または整数の最大値（2Gバイト）のうち、小さいほうの値となります。
Application Runtime の指定値は初期状態で「10485760」が設定されています。 設定値を変更するには、「Service Platform 設定ガイド」を参照してください。		 -
maxSize アップロード可能な最大ファイルサイズ。
アップロード可能な最大のファイルサイズをバイト単位で指定して設定を行います。
複数のファイルを追加した場合でも、合計したサイズではなく１ファイルあたりの最大サイズとなります。
このプロパティの値を超えるサイズのファイルは、コンポーネントにドロップしてもファイルの一覧に追加されません。
指定しない場合、ファイルサイズは制限されません。p. 合計のファイルサイズを制限したい場合は、 maxRequestLength 属性を指定してください		 -
mode ファイル名の表示方法。
以下の値を設定します。
  • path - ファイル名をフルパスで表示します。（デフォルト）
  • name - ファイル名のみを表示します。
  • none - ファイル名や削除ボタンを表示しません。
ファイル名がコンポーネントの表示領域の幅より長い場合、はみ出した部分は省略されます。 領域の横スクロールはできないため、全てのファイル名を確認することはできません。
全てを確認するためには、ツールチップヘルプを確認するか、Ctrlキー＋Cを押下してクリップボードにコピーして確認してください。

（エスケープ対象の属性です） 		-
name 送信ファイルのリクエストパラメータ名。
コンポーネントに複数のファイルを追加して送信した場合、この属性に設定したリクエストパラメータ名の配列として送信されます。 ただし、以下のように指定することで、パラメータ名を連番にして送信することが可能です。
任意の文字列 + % num
　　　 num ： 連番の開始番号

（例）
・タグの指定：
　　　 <IMART type=“upload”... name=“upload_file%1”>
・リクエストパラメータの名前：
　　　 upload_file1, upload_file2, ...
指定しない場合、リクエストパラメータの名前として「id」属性の値が利用されます。
（エスケープ対象の属性です） 		-
onBlur フォーカスロストコールバック関数。
フォーカスを失った場合に呼び出される、CSJSの関数名を指定します。
指定する関数は、CSJSの ImUploadActionEvent オブジェクトを引数とします。
引数 ImUploadActionEvent オブジェクトのプロパティについては、CSJSのAPIを参照してください。
（エスケープ対象の属性です） 		-
onChange 変更イベント用コールバック関数。
ファイル一覧の内容が変化した場合に呼び出される、CSJSの関数名を指定します。
指定する関数は、CSJSの ImUploadActionEvent オブジェクトを引数とします。
引数 ImUploadActionEvent オブジェクトのプロパティについては、CSJSのAPIを参照してください。
（エスケープ対象の属性です） 		-
onFocus フォーカス取得コールバック関数。
フォーカスを取得した場合に呼び出される、CSJSの関数名を指定します。
指定する関数は、CSJSの ImUploadActionEvent オブジェクトを引数とします。
引数 ImUploadActionEvent オブジェクトのプロパティについては、CSJSのAPIを参照してください。
（エスケープ対象の属性です） 		-
page 送信先のスクリプト開発モデルのパス。
スクリプト開発で作成されたページパスを指定することが可能です。
ページパスは、“/”区切りで拡張子なしで指定します。		 -
rows コンポーネントの高さ。
行数で指定します。
ファイル数がこの値を超える場合、スクロールバーが表示されます。
指定しない場合、１行となります。		 -
style コンポーネントのスタイルを、オブジェクト形式で指定します。
以下のスタイル情報をオブジェクトのプロパティとして指定します。
  • font - フォントのファミリーネームを指定します。
  • size - フォントのサイズをポイント数で指定します。
  • color - フォントの文字色を16進形式（#ffffff）で指定します。
  • background - コンポーネントの背景色を16進形式（#ffffff）で指定します。
  • border - コンポーネントの枠線のサイズをピクセル数で指定します。
color, background プロパティの色の指定には、 カラーチャート のカラー名を利用することも可能です。

// ［設定例］
// ファンクションコンテナでオブジェクトを指定する。（JSON形式の場合）
 var style = {border: 2, background: “#aaffaa”, size: 22, color:
  “deepskyblue”, font: “HG創英角ﾎﾟｯﾌﾟ体”};//<!-- プレゼンテーションページでタグを指定する。-->
 <IMART type=“upload”... style=style><IMART>
（エスケープ対象の属性です） 		-
visible コンポーネントの表示状態。
「false」を設定した場合、コンポーネントは非表示となります。
ImUploadApplet#setView(Boolean) 関数を利用して、コンポーネントの表示状態を変更することが可能です。
指定しない場合、コンポーネントは表示されます。		 -

内部タグ

IMARTタグ

サンプル

サンプル

サンプル 
			<IMART type="upload" id="upload1" page="sample/upload"></IMART><br/>
			<blockquote>
			このタグの位置にファイルアップロードコンポーネントを表示します。<br/>
			ファイルをアップロードするためには、このコンポーネントにデスクトップのファイルをドロップして追加後、
			<a href="../../im_csjs/ImUploadApplet.html#upload"><code>ImUploadApplet#upload()</code></a>関数を呼び出します。<br/>
			</blockquote>
			<IMART type="upload" id="upload1" page="sample/upload"<br/>
			　　　cols="40" rows="5" name="upload_file" accept="*.jpg"<br/>
			　　　auto="true" delay="3000" callback="onUpload" interval="1000"></IMART><br/>
			<blockquote>
			幅40文字、高さ5行のサイズでファイルアップロードコンポーネントを表示します。<br/>
			送信可能なファイルは拡張子が「jpg」のファイルのみとなります。<br/>
			ファイルをドロップして３秒経過後にファイルの送信を開始します。また、送信完了まで１秒間隔で送信中イベントが発生し、
			<a href="#callback"><code>callback</code></a>属性で指定したCSJSの関数「<code>onUpload</code>」が呼び出されます。<br/>
			送信ファイルは、サーバでリクエストパラメータ名「<code>upload_file</code>」を指定して取得できます。
			</blockquote>
			<IMART type="upload" id="upload1" page="sample/upload"><br/>
			　<IMART type="<a href="uploadPath.html">uploadPath</a>" path="C:\work\sample.jpg"/><br/>
			　<IMART type="<a href="uploadPath.html">uploadPath</a>" path="C:\work\sample.gif"/><br/>
			</IMART><br/>
			<blockquote>
			「<code>uploadPath</code>」タグを利用することで、送信ファイル名を初期表示します。<br/>
			エラー画面などから遷移してきた場合に、ファイル名を再表示する場合に利用できますが、
			クライアントのファイルをサーバの処理で指定することはセキュリティ上好ましくなく、
			<input type="file"> タグでは初期表示の処理ができないようになっています。<br/>
			そのため、このタグを利用する場合は、十分にセキュリティリスクを検討して利用してください。<br/>
			同くセキュリティ上の理由から「<a href="#auto"><code>auto</code></a>」属性を指定して即時送信、遅延送信を利用する場合は、
			「<code>uploadPath</code>」タグの指定は無効となります。<br/>
			</blockquote>
			<IMART type="upload" id="upload1" page="sample/upload"><br/>
			　<IMART type="<a href="uploadParam.html">uploadParam</a>" name="name" value="サンプル"/><br/>
			　<IMART type="<a href="uploadParam.html">uploadParam</a>" name="path" value="work/200912"/><br/>
			</IMART><br/>
			<blockquote>
			「<code>uploadParam</code>」タグを利用することで、ファイルアップロード時に一緒に送信するリクエストパラメータを指定します。<br/>
			</blockquote>

Copyright © 2012 NTT DATA INTRAMART CORPORATION