Entry
How can I dynamically increase the number of file upload elements?
How can I allow the user to upload a varying number of files?
Apr 27th, 2000 07:16
Martin Honnen,
With full DOM access in NN6 and IE4+ you can add
INPUT TYPE="file"
elements as needed to the document. Here is an example:
<HTML>
<HEAD>
<SCRIPT>
var f = 0;
function addInput () {
if (document.all || document.getElementById) {
var table = document.all ? document.all.formElems :
document.getElementById('formElems');
var row = table.insertRow(++f);
if (document.all) {
var cell = row.insertCell(0);
cell.innerHTML =
'<INPUT TYPE="file" NAME="fileName' + f + '"'
+ ' ONCHANGE="addInput()">';
cell = row.insertCell(1);
cell.innerHTML =
'<INPUT TYPE="button" VALUE="select another file"' +
' ID="addButton' + f + '"' +
' ONCLICK="addInput();">';
document.all['addButton' + (f - 1)].outerHTML = '';
}
else {
var cell = row.insertCell(0);
var input = document.createElement('INPUT');
input.setAttribute('type', 'button');
input.id = 'addButton' + f;
input.value = 'select another file';
input.onclick = function () { addInput(); };
cell.appendChild(input);
cell = row.insertCell(1);
input = document.createElement('INPUT');
input.setAttribute('type', 'file');
input.name = 'fileName' + f;
input.onchange = function () { addInput(); };
cell.appendChild(input);
var oldButton = document.getElementById('addButton' + (f - 1));
oldButton.parentNode.removeChild(oldButton);
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName"
METHOD="post"
ENCTYPE="multipart/form-data"
ACTION="whatever"
>
<TABLE ID="formElems">
<TR>
<TD>
<INPUT TYPE="file" NAME="fileName0">
</TD>
<TD>
<INPUT ID="addButton0" TYPE="button" VALUE="select another file"
ONCLICK="addInput()"
>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="submit">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
