I wrote a little custom tag to do this.
I saved this code as wg_MultiFileUpload.cfm.....
<!--- **********************************************************************************
*
* Developer: Wayne Gipson
* Date: December 1 2003
* Project: Multiple File Upload Custom Tag
* Purpose: Allow the user to upload multiple files with only 1 browse box.
*
* The following parameters are optional:
* tableStyle: this is the class field for the table holding the checkbox and file name
* tdStyle: the table field holding the file name and check box
* tsStyleOff: the off color row. This is so the file table has different colored rows.
* trStyle: the row holding the td holding the checkbox and file name
* thStyle: the table header that says Upload Queue style.
* inputStyle: this is the class of the browse button
* checkBoxStyle: this is the class of the check box
* addButtonStyle: this is the style of the add button
* removeButtonStyle: this is the class of the remove button
*
* How To Use:
* For this function to work the programmer will need to have a form field on their
* page. place a reference to this code in between the form tags. The only thing the
* programmer will need to do is add an action page looping for file__ to get the
* fields.
**************************************************************************************** --->
<cfparam name="attributes.tableStyle" default="">
<cfparam name="attributes.tdStyle" default="">
<cfparam name="attributes.tdStyleOff" default="#attributes.tdStyle#">
<cfparam name="attributes.trStyle" default="">
<cfparam name="attributes.thStyle" default="">
<cfparam name="attributes.inputStyle" default="">
<cfparam name="attributes.checkBoxStyle" default="">
<cfparam name="attributes.addButtonStyle" default="">
<cfparam name="attributes.removeButtonStyle" default="">
<cfoutput>
<script type="text/javascript">
var fileNumber=0;
var rowNumber=1;
function moveValue()
{
//check to see if there is a value in the file field
if(document.getElementById("file__"+fileNumber).value)
{
deleteStyle="#attributes.removeButtonStyle#";
browseStyle="#attributes.checkBoxStyle#";
tableStyle="#attributes.tableStyle#";
trStyle="#attributes.trStyle#";
tdStyle="#attributes.tdStyle#";
//tdStyleOff="#attributes.tdStyleOff#";
if(rowNumber%2==0)
tdStyle="#attributes.tdStyle#";
else
tdStyle="#attributes.tdStyleOff#";
//place a holding div next to a div already in the form
//place a holding div next to a div already in the form
document.getElementById("fileDiv"
.insertAdjacentHTML("AfterEnd","<div id='div"+fileNumber+"'>"
;
document.getElementById("div"+fileNumber).innerHTML="<table id='table"+fileNumber+"' width='100%'>"+
"<tr id='tr"+fileNumber+"' class='"+trStyle+"'>"+
"<td id='col_one_"+fileNumber+"' class='"+tdStyle+"' align='left'>"+
document.getElementById("file__"+fileNumber).value+
"</td>"+
"<td id='col_two_"+fileNumber+"' class='"+tdStyle+"' align='right'>"+
"<input type='button' onClick='removeDiv(this);' id='"+fileNumber+"' value='Remove' class='"+deleteStyle+"'>"+
"</td>"+
"</tr>"+
"</table>";
//make the old file input disapear
document.getElementById("file__"+fileNumber).style.display="none";
//increment the file number so we can create the next one
fileNumber++;
rowNumber++;
//put a value in the numFiles so we know how many files we need to loop through on server side
document.getElementById("numFiles"
.value=fileNumber;
//call the function to make the make the new file input field
makeNewInput();
}
else
alert("Please click browse and select a value"
;
}
function makeNewInput()
{
//create a new element of type input
var inputElem = document.createElement("input"
;
//set the type attribute to file
inputElem.setAttribute("type","file"
;
//set the name attribute to file0 or file1 and so on
inputElem.setAttribute("name","file__"+fileNumber);
//set the id attribute to file0 or file1 and so on
inputElem.setAttribute("id","file__"+fileNumber);
//inputElem.setAttribute("onkeydown","return false;"
;
//set the class or style
inputElem.setAttribute("class","#attributes.inputStyle#"
;
//insert the new file input field in the div
document.getElementById("fileDivs"
.appendChild(inputElem);
document.getElementById("file__"+fileNumber).attachEvent("onkeydown",noKeys);
}
function removeDiv(toRemove)
{
if(document.getElementById("div"+toRemove.id))
{
document.getElementById("div"+toRemove.id).removeNode(true);
}
if(document.getElementById("file__"+toRemove.id))
{
document.getElementById("file__"+toRemove.id).removeNode(true);
}
}
function noKeys()
{
return false;
}
</script>
<input type="hidden" name="numFiles" id="numFiles" value="0">
<input type="hidden" name="activeFiles" id="activeFiles">
<div name="fileDivs" id="fileDivs">
<input type="file" name="file__0" id="file__0" class="#attributes.inputStyle#" onKeyDown="return false;">
</div>
<input type="button" onClick="moveValue();" value="Add File" class="#attributes.addButtonStyle#">
<!---
<input type="button" onClick="removeDiv();" value="Delete File" class="#attributes.removeButtonStyle#">
--->
<table border="1" id="testTable" class="#attributes.tableStyle#">
<tr class="#attributes.trStyle#">
<th colspan="2" class="#attributes.thStyle#">
Upload Queue
</th>
</tr>
<tr class="#attributes.trStyle#">
<td class="#attributes.tdStyle#">
<div id="fileDiv">
</div>
</td>
</tr>
<tr id="bottomRow" name="bottomRow">
<td id="insideTD" name="insideTD">
</td>
</tr>
</table>
</cfoutput>
<!--- this is the end of the custom tag --->
Then in my first page i referenced the file like this:
<body>
This is a test page
<FORM name="form1" id="form1" action="uploadAction.cfm" method="post" enctype="multipart/form-data">
<cf_wg_MultiFileUpload tdStyle="Chart" tableStyle="newClass" thStyle="ChartHEADING">
<!---
<cf_wg_CheckMultiUpload>
--->
<input type="submit" value="Submit Form">
</FORM>
<BR>
</body>
then, in my action page i did this:
<cfif form.numFiles GT 0>
<cfloop list="#form.fieldnames#" index="i">
<cfif i contains "file__">
<cfif len(evaluate("form."&i))>
<CFSET sPath = listdeleteat(GetCurrentTemplatePath(),listlen(GetCurrentTemplatePath(),"\"
,"\"
>
<cfset filePath = sPath&"\uploadedDocs\">
<cffile action="upload"
filefield="#i#"
destination="#filePath#"
nameconflict="OVERWRITE">
</cfif>
</cfif>
</cfloop>
</cfif>
I hope this helps. Let me know if you need this further explained, or have suggestions to make it better. Im always willing to change things to make them better.
RackboyUT
