...

View Full Version : Add/remove multiple input type="file" without losing value



fci
08-07-2005, 03:36 AM
example with <ol> as parent.

<script type="text/javascript"><!--
var gFiles = 0;
function addFile() {
var li = document.createElement('li');
li.setAttribute('id', 'file-' + gFiles);
li.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile(\'file-' + gFiles + '\')" style="cursor:pointer;">Remove</span>';
document.getElementById('files-root').appendChild(li);
gFiles++;
}
function removeFile(aId) {
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
}
--></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"><!--
var gFiles = 0;
function addFile() {
var tr = document.createElement('tr');
tr.setAttribute('id', 'file-' + gFiles);
var td = document.createElement('td');
td.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile(\'file-' + gFiles + '\')" style="cursor:pointer;">Remove</span>';
tr.appendChild(td);
document.getElementById('files-root').appendChild(tr);
gFiles++;
}
function removeFile(aId) {
var obj = document.getElementById(aId);
obj.parentNode.removeChild(obj);
}

--></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, 02: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, 11:30 PM
Dear Sir,
I would really thank to you for this script. It was really a saver :).
Thanks and best regards.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum