|
cffileupload
DescriptionDisplays
a dialog for uploading multiple files from the user's system.
The
enhanced dialog includes the following features: You can
specify the maximum number of files and the maximum file size for the
upload.
A progress bar to visually indicate the overall progress
of the file upload task, and another progress bar to indicate the
upload progress of each individual file.
A success or failure message appears for each file upload
and the overall upload task.
At any point during the upload task, you can cancel the upload.
Syntax<cffileupload
addbuttonlabel= "label"
align = align="center|justify|left|right"
bgcolor = "hexadecimal value"
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>
Note: You can specify
this tag’s attributes in an attributeCollection attribute
whose value is a structure. Specify the structure name in the attributeCollection attribute
and use the tag’s attribute names as structure keys.
HistoryColdFusion
9: Added this tag.
Attributes
Attribute
|
Req/Opt
|
Default
|
Description
|
addbuttonlabel
|
Optional
|
Add Files
|
Label of the Add button.
|
align
|
Optional
|
left
|
Specifies the default alignment.
The
following values are valid:
center
justify
left
right
|
bgcolor
|
Optional
|
|
The background color for the file upload
control. A hexadecimal value without “#” prefixed.
|
clearbuttonlabel
|
Optional
|
Clear All
|
Label of the Clear button
|
deletebuttonlabel
|
Optional
|
Delete
|
Label of the Delete button
|
extensionfilter
|
Optional
|
none
|
Use this attribute to specify the type of
file that you will allow to be uploaded. For example, to let only
image files to be uploaded, you can specify file extensions such
as .jpg, .jpeg, or .png.
If set to none,
files are uploaded without any extension filter.
|
height
|
Optional
|
300
|
Height of the file upload control, in pixels.
|
hideUploadButton
|
Optional
|
false
|
A Boolean value that specifies if the Upload
button should appear in the file upload dialog:
|
maxfileselect
|
Optional
|
|
The maximum number of files allowed for
upload.
|
maxuploadsize
|
Optional
|
10MB
|
The maximum file size, in Megabytes, allowed
for upload in an operation.
|
name
|
Optional
|
|
Name of the file upload component.
|
onComplete
|
Optional
|
|
The JavaScript function to run when a file
has finished uploading.
By default, ColdFusion passes a JavaScript
object as a parameter to this function with the following properties: STATUS - numeric value that is based on
the HTTP status code
MESSAGE - Passed or Failed
FILENAME - Name of the file selected for
upload
You can also pass the JavaScript object
by creating a struct with parameters "status" and "message" and
call serializeJSON() on the JavaScript object.
|
onError
|
Optional
|
|
The JavaScript function to run if the uploading
of a file fails. The error can be a network error or server-side
error.
By default, ColdFusion passes a JavaScript object
as a parameter to this function with the following properties: STATUS - numeric value that is based on the HTTP status code
MESSAGE - Passed or Failed
FILENAME - Name of the file selected for upload
You
can also pass the JavaScript object by creating a struct with parameters
"status" and "message" and call serializeJSON() on the JavaScript
object.
|
onUploadComplete
|
Optional
|
|
The JavaScript function to run after uploading
all the files.
|
progressbar
|
Optional
|
true
|
Whether to display a progress bar while
the files upload:
|
stoponerror
|
Optional
|
true
|
Specifies whether to ignore the exceptions
for this operation.
|
style
|
Optional
|
|
A CSS style specification that defines layout
styles.
|
title
|
Optional
|
|
Title for the upload dialog.
|
uploadbuttonlabel
|
Optional
|
Upload
|
Label of the Upload button.
|
url
|
Required
|
|
The URL to the server where the files are
uploaded.
|
width
|
Optional
|
420
|
Width of the file upload control, in pixels.
|
wmode
|
Optional
|
window
|
Specifies the absolute positioning and layering
capabilities in your browser:
window: Plays the
media player in its own rectangular window on a web page
opaque: Hides everything behind the media player on the web
page
transparent: Lets the background of the web page show through
the transparent portions of the media player
|
UsageUse this
tag to create a SWF file-based file upload control that lets a user
upload multiple files to a server.
To upload files to the
server, define a server-side template. The template that you define
reads the upload request and uploads the selected files to the server.
Supported StylesThe following are the
supported styles:
Style
|
Description
|
headercolors
|
Format: color; colors of the band at the
top of the DateChooser control. Specify two values, separated by
a comma. For a solid band, use the same color for both values. The
default value is ##E6EEEE,##FFFFFF.
|
textcolor
|
Color of text. Can be a hexadecimal value
or a named color.
For a hexadecimal value, use the form"##xxxxxx",
where x = 0-9 or A-F; use two number signs or none.
|
titletextalign
|
Aligns the title text. The recognized values
are left, right, and center. The default value is right.
|
titletextcolor
|
Color of the title text.
|
bgcolor
|
The background color for the file upload
control. A hexadecimal value without “#” prefixed.
|
rollovercolor
|
Displays values on mouse-over.
|
selectcolor
|
Background color for a selected item. Can
be a hexadecimal value or a named color.
For a hexadecimal
value, use the form "##xxxxxx", where x = 0-9 or A-F; use two number
signs or none. For a list of the supported named colors, see cfchart.
|
Example<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>
<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"/>
This example sends user-specified files to the server-side
template - uploadfiles.cfm. The template file that
you define can use the " upload" or " uploadall"
action defined in the cffile tag. Note: The filefield attribute
of the upload action is optional.
Use the destination attribute
in the cffile tag to define the location to save
the files. For the uploadfiles.cfm code, see cffile action = "uploadAll".
|