Below is the source code for example_2.cfm
<!--- default values --->
<cfparam name="form.SessionKey" default="#replace(createuuid(),"-","","ALL")#">
<cfparam name="form.Style" default="border-color:##cccccc">
<cfparam name="form.ShowUploadButton" default="false">
<cfparam name="form.RedirectTo" default="">
<cfparam name="form.MaxFile" default="5">
<cfparam name="form.MaxFileSize" default="262144">
<cfparam name="form.MaxFileSizeTotal" default="1048576">
<cfparam name="form.FileFilter" default="Images,*.jpg;*.gif;*.png">
<cfparam name="form.FlashUploadName" default="Picture">
<cfparam name="form.FirstName" default="John">
<cfparam name="form.LastName" default="Doe">
<cfparam name="form.Email" default="john@doe.com">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Flash Multi Upload Example</title>
<style type="text/css">
.textfield { font-family: "MS Sans Serif"; font-size: 9pt; border: 1px solid #cccccc; }
.button { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #000000; cursor: hand}
.tablestandard { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
</style>
</head>
<body>
<cfoutput>
<h3>Flash Multi Upload Example</h3>
<hr size=1>
<strong class="tablestandard">Fill in your profile below:</strong><br><br>
<table width="100%" cellpadding="2" cellspacing="2" border="0" class="tablestandard">
<tr>
<td nowrap valign="top" align="left">
<table cellpadding="2" cellspacing="2" border="0" class="tablestandard">
<cfform action="upload_2_data.cfm" method="POST" name="frmData">
<tr>
<td nowrap valign="top">First name:</td>
<td width="100%" valign="top">
<cfinput type="text" name="FirstName" size="20" value="#form.FirstName#" class="textfield" required="Yes" message="You have to enter your first name">
</td>
</tr>
<tr>
<td nowrap valign="top">Last name:</td>
<td width="100%" valign="top">
<cfinput type="text" name="LastName" size="20" value="#form.LastName#" class="textfield" required="Yes" message="You have to enter your last name">
</td>
</tr>
<tr>
<td nowrap valign="top">Email address:</td>
<td width="100%" valign="top">
<cfinput type="text" name="Email" size="20" value="#form.Email#" class="textfield" required="Yes" message="You have to enter your email address">
</td>
</tr>
<input type="Hidden" name="SessionKey" value="#form.SessionKey#">
<input type="Hidden" name="FlashUpload_XMLResult">
</cfform>
<tr>
<td nowrap valign="top">
Upload your photo<br>
Maximum:<br>
#form.MaxFile# file(s)<br>
#form.MaxFileSize# bytes each<br>
#form.MaxFileSizeTotal# bytes total<br>
</td>
<td width="100%" valign="top">
<cf_flashmultiupload name="#form.FlashUploadName#" Action="upload_2_file.cfm?SessionKey=#form.SessionKey#" Style="#form.Style#" FileFilter="#form.FileFilter#"
MaxFile="#form.MaxFile#" MaxFileSize="#form.MaxFileSize#" MaxFileSizeTotal="#form.MaxFileSizeTotal#"
RedirectTo="#form.RedirectTo#" ShowUploadButton="#form.ShowUploadButton#"
OnProgress="ShowStatus">
</td>
</tr>
<tr>
<td colspan="2">
<form>
<input type="Button" name="Submit" value="Upload My Profile" class="button" onclick="javascript:Upload();">
</form>
</td>
</tr>
</table>
</td>
<td valign="top" align="left" width="100%">
Notes:<br>
<ol>
<li>
Due to the limitation of Flash and HTML <object>, FlashMultiUpload CAN NOT be put in <form>
</li>
<li>
On the left example, we create one <form> containing "FirstName, LastName, Email".<br>
A FlashMultiUpload object (outside the form).<br>
And another form holding the Submit button.
</li>
<li>
Upon clicking Submit button, the following actions take place:<br>
1. Upload the file, and process it in upload_2_file.cfm<br>
2. After file has been uploaded, upload other fields, and process it in upload_2_data.cfm<br>
3. Combine both file and other fields in upload_2_data.cfm<br>
<br>
The upload process is done using JavaScript.
</li>
</ol>
</td>
</tr>
</table>
<script language="JavaScript">
function ShowStatus(iFlashUploadStatus)
{
var objFlash;
var iFlashUploadResult;
if (navigator.appName.indexOf("Microsoft")!=-1) objFlash=window.#form.FlashUploadName#;
else objFlash=window.document.#form.FlashUploadName#;
if (iFlashUploadStatus==1)
{
// send the uploaded filename to form field
document.frmData.FlashUpload_XMLResult.value=objFlash.FlashUpload_GetXMLResult();
// submit form containing data
document.frmData.submit();
}
else if (iFlashUploadStatus==-1) alert("Upload canceled");
else if (iFlashUploadStatus==-2) alert("Upload Fail: IO error");
else if (iFlashUploadStatus==-2) alert("Upload Fail: Security error");
else if (iFlashUploadStatus==-4) alert("Upload Fail: HTTP Eeror");
if (iFlashUploadStatus==2) document.body.style.cursor="wait"; // uploading
else document.body.style.cursor="";
}
function Upload()
{
var objFlash;
var iFlashUploadResult;
if (navigator.appName.indexOf("Microsoft")!=-1) objFlash=window.#form.FlashUploadName#;
else objFlash=window.document.#form.FlashUploadName#;
iFlashUploadResult=objFlash.FlashUpload_DoUpload();
if (iFlashUploadResult)
{
// uploading
}
else
{
alert("Please select file to upload first");
}
}
</script>
<div class="tablestandard">
<hr size="1">
To customize FlashMultiUpload object, <a href="example.cfm">please see the following example</a> <br>
View source code: <a href="viewsource.cfm?source=example_2.cfm">example_2.cfm</a>, <a href="viewsource.cfm?source=upload_2_file.cfm">upload_2_file.cfm</a>, <a href="viewsource.cfm?source=upload_2_data.cfm">upload_2_data.cfm</a>
</div>
</cfoutput>
</body>
</html>