説明

ユーザーのシステムから複数のファイルをアップロードするためのダイアログボックスを表示します。機能強化されたダイアログボックスには、次の機能があります。

  • アップロードするファイルの最大数とファイルの最大サイズを指定できます。
  • プログレスバーに、ファイルのアップロードタスクの全体的な進行状況が視覚的に示されます。また、もう 1 つのプログレスバーに、個別のファイルのアップロードの進行状況が示されます。
  • ファイルのアップロードごと、およびアップロードタスク全体に関して、成功または失敗を示すメッセージが表示されます。
  • アップロードタスクの任意の時点で、アップロードをキャンセルできます。

カテゴリ

ファイル管理タグフォームタグ

シンタックス

<cffileupload>
addbuttonlabel= "label"
align = align="center|left|right"
bgcolor = "color"
clearbuttonlabel = "label"
deletebuttonlabel = "label"
extensionfilter = "none|jpg,jpeg,png"
height= "number of pixels"
hideUploadButton = "true|false"
maxfileselect = "number of files"
maxuploadsize = "file size in mega bytes"
name = "File uploader name"
oncomplete = "JavaScript function name"
onerror = "JavaScript function name"
onUploadComplete = "JavaScript function name"
progressbar = "true|false"
stoponerror = "true|false"
style = "style specification"
title = "Title panel name"
uploadbuttonlabel = "label"
url = "URL"
width = "number of pixels"
wmode = "window|opaque|transparent"
</cffileupload>

 

注意:このタグの属性は attributeCollection 属性で指定でき、その値は構造体になります。attributeCollection 属性で構造体の名前を指定し、タグの属性名を構造体のキーとして使用します。

関連項目

cffile action = "uploadAll"

履歴

ColdFusion 9: このタグが追加されました。

属性

属性

必須/オプション

デフォルト

説明

addbuttonlabel

オプション

ファイルを追加

「追加」ボタンのラベルです。

align

オプション

left

デフォルトの配置を指定します。
使用できる値は次のとおりです。

  • center
  • left
  • right

bgcolor

オプション

 

ファイルアップロードコントロールの背景色です。先頭の「#」を除いた 16 進数値または認識可能なカラー名(red など)です。

clearbuttonlabel

オプション

すべてをクリア

「クリア」ボタンのラベルです。

deletebuttonlabel

オプション

削除

「削除」ボタンのラベルです。

extensionfilter

オプション

none

この属性は、アップロードを許可するファイルタイプを指定する場合に使用します。例えば、イメージファイルのみをアップロード可能にするには、.jpg、.jpeg、.png などのファイル拡張子を指定できます。
none に設定すると、拡張子フィルターが適用されずにファイルがアップロードされます。

height

オプション

300

ファイルアップロードコントロールの高さです (単位 : ピクセル)。

hideUploadButton

オプション

false

ファイルアップロードダイアログボックスに「アップロード」ボタンを表示するかどうかを指定する boolean 値です。

  • true
  • false

maxfileselect

オプション

 

アップロード可能なファイルの最大数です。

maxuploadsize

オプション

10 MB

1 回のオペレーションでアップロード可能なファイルの最大サイズ(MB)です。maxuploadsize 属性の値が、ColdFusion Administrator で指定されているスロットルまたは送信データサイズの設定を超えると、エラーが発生します。

name

オプション

 

ファイルアップロードコンポーネントの名前です。

onComplete

オプション

 

ファイルのアップロードが終了したときに実行する JavaScript 関数です。デフォルトでは、次のプロパティを持つ JavaScript オブジェクトがパラメーターとしてこの関数に渡されます。

  • STATUS - HTTP ステータスコードに基づいた数値です。
  • MESSAGE - 成功または失敗を示します。
  • FILENAME - アップロード対象として選択されたファイルの名前です。
    また、status および message のパラメータを指定した構造体を作成することによって JavaScript オブジェクトを渡し、その JavaScript オブジェクトに対して serializeJSON() を呼び出すこともできます。

onError

オプション

 

ファイルのアップロードが失敗したときに実行する JavaScript 関数です。この場合のエラーとは、ネットワークエラーまたはサーバーサイドエラーとなります。デフォルトでは、JavaScript オブジェクトが、パラメータとして次のプロパティとともにこの関数に渡されます。

  • STATUS - HTTP ステータスコードに基づいた数値です。
  • MESSAGE - 成功または失敗を示します。
  • FILENAME - アップロード対象として選択されたファイルの名前です。
    また、status および message のパラメータを指定した構造体を作成することによって JavaScript オブジェクトを渡し、その JavaScript オブジェクトに対して serializeJSON() を呼び出すこともできます。
onUploadComplete オプション   すべてのファイルがアップロードされた後に実行する JavaScript 関数です。

progressbar

オプション

true

ファイルのアップロード中にプログレスバーを表示するかどうかを指定します。

  • true
  • false

stoponerror

オプション

true

このオペレーションに関する例外を無視するかどうかを指定します。

  • true - アップロードを中止して、該当するエラーを表示します。
  • false - アップロードを続行して、該当するエラーを表示します。

style

オプション

 

レイアウトのスタイルを定義する CSS スタイル指定です。

title

オプション

 

アップロードダイアログボックスのタイトルです。

uploadbuttonlabel

オプション

アップロード

「アップロード」ボタンのラベルです。

url

オプション

 

ファイルのアップロード先となるサーバーの URL です。
この属性はオプションで、デフォルトでは cgi.script_name が設定されます。

width

オプション

420

ファイルアップロードコントロールの幅です (単位 : ピクセル)。

wmode

オプション

window

ブラウザでの絶対位置設定およびレイヤー作成の機能を指定します。

  • window: Web ページ上の独自の長方形のウィンドウ内でメディアプレーヤーを再生します。
  • opaque: Web ページ上でメディアプレーヤーの背後にあるものをすべて非表示にします。
  • transparent: メディアプレーヤーの透明の部分に Web ページの背景が透けて見えるようにします。

使用方法

このタグは、ユーザーがサーバーに複数のファイルをアップロードできるようにする、SWF ファイル形式のファイルアップロードコントロールを作成する場合に使用します。サーバーにファイルをアップロードするには、サーバーサイドテンプレートを定義します。定義したテンプレートは、アップロードリクエストを読み込み、選択されたファイルをサーバーにアップロードします。

ColdFusion 9.0.1 で行われた機能強化

ColdFusion 9.0.1 では、Application.cfc か Application.cfm のいずれかでセッション管理がオンになっている場合、ファイルアップロードコントロールで暗黙的にセッション情報が対象ページに渡されます。例えば、ファイルアップロードコントロールが URL 属性なしで定義されているとします。この場合、ユーザーがアップロードボタンを使用してデータをアップロードしようとすると、コントロールによって同じページに戻されます。ユーザーは、form.fieldnames をチェックしてアップロードを実行できます。次に例を示します。Upload.cfm

<cfif isdefined("form.FIELDNAMES")>
<cffile action = "upload" destination = "#ExpandPath('.')#" nameconflict="makeunique">
</cfif>
<cffileupload name="myuploader">

この場合、url には、デフォルトで CGI.script_name が設定されます。
ファイルアップロードコントロールと URL の間のセッションを維持するには、ユーザーがセッション管理をオンにする必要があります。これを実行するには、Application.cfc で this.sessionmanagement=true を設定します。「J2EE セッション変数の使用」(ColdFusion Administrator/サーバーの設定/メモリ変数) が選択されていない場合は、この設定によって CFID と CFtoken が URL の一部として渡されるようになります。選択されている場合は、JsessionID が URL の一部として渡されます。

サポートされているスタイル

サポートされるスタイルは次のとおりです。

スタイル

説明

headercolors

形式は色です。DateChooser コントロール上部のバンドの色を指定します。2 つの値をカンマで区切って指定します。塗りつぶしのバンドの場合、両方の値に同じ色を使用します。デフォルト値は ##E6EEEE、##FFFFFF です。

textcolor

テキストの色です。16 進数値またはカラー名で指定します。16 進数の値を入力するには、"##xxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。

titletextalign

タイトルテキストを揃えます。認識される値は、left、right、および center です。デフォルト値は right です。

titletextcolor

タイトルテキストの色を指定します。

bgcolor

ファイルアップロードコントロールの背景色です。先頭の「#」を除いた 16 進数値または認識可能なカラー名(red など)です。

rollovercolor

マウスカーソルが上に置かれたときに値を表示します。

selectcolor

選択されている項目の背景色です。16 進数値またはカラー名で指定します。
16 進数の値を入力するには、"##xxxxxx" という形式を使用します。ここで、x は 0 ~ 9 または A ~ F です。シャープ記号 (#) は 2 つ使用するか、または使用しないでください。サポートされる色の名前については、「cfchart」を参照してください。

<h3>Instructions</h3>
<p>Create a folder Upload in your C: drive
<br>Try uploading files using the file upload component and check if the files have been appropriately saved in the Upload folder.</p>
<script>
var foo = function(result)
{
alert(ColdFusion.JSON.encode(result));
}
</script>
<cffileupload
url="uploadFiles.cfm"
progressbar="true"
name="myupload"
addButtonLabel = "Add File"
clearButtonlabel = "Clear it"
hideUploadButton = "true"
width=600
height=400
title = "File Upload"
maxuploadsize="30"
extensionfilter="*.jpg, *.png, *.flv, *.txt"
BGCOLOR="##FFFFFF"
MAXFILESELECT=10
UPLOADBUTTONLABEL="Upload now"/>

uploadfiles.cfm は次のように記述します。

<cffile action="upload" destination="#expandpath('./upload')#" nameconflict="makeunique"> <cfoutput>#serializeJSON({STATUS=200,MESSAGE='Passed'})#</cfoutput>

この例では、サーバーサイドテンプレート uploadfiles.cfm にユーザー指定のファイルを送信しています。定義したテンプレートファイルでは、cffile タグで定義された upload または uploadall アクションを使用できます。

注意:upload アクションの filefield 属性はオプションです。

ファイルの保存場所を定義するには、cffile タグで destination 属性を使用します。uploadfiles.cfm のコードについては、「cffile action = "uploadAll"」を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー