Add/remove multiple input type="file" without losing value

fci

08-07-2005, 02:36 AM

example with <ol> as parent.
<script type="text/javascript"></script>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<ol id="files-root">
<li><input type="file" name="file[]">
</ol>

example using table:
<script type="text/javascript"></script>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<table><tbody id="files-root">
<tr><td><input type="file" name="file[]"></td></tr>
</table>

friend needed this. I did the ol one first then he said he wanted it as a table for some reason.. so here they are.. nothing fancy.

Kor

08-15-2005, 01:32 PM

It;s OK...and here's the full DOM compliant variant (innerHTML is not a DOM method...) for those which wanna exercise DOM methods:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addFile(){
var root=document.getElementById('mytab').getElementsByTagName('tr')[0].parentNode;
var oR = cE('tr');var oC = cE('td');var oI = cE('input'); var oS=cE('span')
cA(oI,'type','file');cA(oI,'name','file[]');
oS.style.cursor='pointer';
oS.onclick=function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
}
oS.appendChild(document.createTextNode(' Remove'));
oC.appendChild(oI);oC.appendChild(oS);oR.appendChild(oC);root.appendChild(oR);
}
function cE(el){
this.obj =document.createElement(el);
return this.obj
}
function cA(obj,att,val){
obj.setAttribute(att,val);
return
}
</script>
</head>
<body>
<span onclick="addFile()" style="cursor:pointer;">Add</span>
<table id="mytab">
<tr><td><input type="file" name="file[]"></td></tr>
</table>
</body>
</html>

isisgraf

07-31-2006, 10:30 PM

Dear Sir,
I would really thank to you for this script. It was really a saver :).
Thanks and best regards.