Code: Select all
if (el.childNodes.item(i).id == nodeID) break;Moderator: General Moderators
Code: Select all
if (el.childNodes.item(i).id == nodeID) break;Code: Select all
<!--
function addFileBox(elementID)
{
el = document.getElementById(elementID); //Get the parent element Node
var appenderInput = document.createElement('input'); //Create a new <input /> element
appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
var appenderDiv = document.createElement('div');
appenderDiv.appendChild(appenderInput);
appenderDiv.innerHTML += '<a href="javascript:delFileBox(\'fileContainer\', this.parentNode);">[ Delete ]</a>';
el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}
function delFileBox(elementID, this.parentNode)
{
el = document.getElementById(elementID); //Get the parent element Node
el.removeChild(this.parentNode);
}
// -->Code: Select all
<script type="text/javascript">
<!--
function addFileBox(elementID)
{
el = document.getElementById(elementID); //Get the parent element Node
var appenderInput = document.createElement('input'); //Create a new <input /> element
appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
var appenderDiv = document.createElement('div'); //New <div /> to hold the row
appenderDiv.appendChild(appenderInput); //Put our <input /> into the new <div />
var appenderLink = document.createElement('span'); //Anchors don't work so well with DHTML so we'll fake it with <span />
appenderLink.setAttribute('onclick', 'delFileBox(this)'); //Give it an onclick event so it behaves like a href
appenderLink.style.cursor = 'pointer'; //Make the cursor a pointer so its more obvious
appenderLink.innerHTML += '[ Delete ]'; //Text for the "fake" link
appenderDiv.appendChild(appenderLink); //Add the "fake" link to the <div />
el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}
function delFileBox(elementNode)
{
/*
Fetch the parent of the parent of the fake link (the outer div)
Fetch the parent of the div (the actual row)
Delete the rwo from the outer div
*/
elementNode.parentNode.parentNode.removeChild(elementNode.parentNode);
}
// -->
</script>Havent done one yet but thanksfoobar wrote:Thanks for the DOM "tutorial", d11. I'll use it as reference for later use. (I usually limit myself to using document.getElementById())
Code: Select all
foreach ($_FILES["theFile"]["error"] as $key => $error)
{
echo $tmp_name = $_FILES["theFile"]["tmp_name"][$key]."<br>";
echo $name = $_FILES["theFile"]["name"][$key]."<br>";
}Code: Select all
<html>
<head>
<title>Multiple file uploader</title>
<script type="text/javascript">
<!--
function addFileBox(elementID)
{
el = document.getElementById(elementID); //Get the parent element Node
var appenderInput = document.createElement('input'); //Create a new <input /> element
appenderInput.name = 'theFile[]'; //Give it a <input name="theFile[]" /> attribute
appenderInput.type = 'file'; //Give it <input type="file" name="theFile[]" />
var appenderDiv = document.createElement('div'); //New <div /> to hold the row
appenderDiv.appendChild(appenderInput); //Put our <input /> into the new <div />
var appenderLink = document.createElement('span'); //Anchors don't work so well with DHTML so we'll fake it with <span />
appenderLink.setAttribute('onclick', 'delFileBox(this)'); //Give it an onclick event so it behaves like a href
appenderLink.style.cursor = 'pointer'; //Make the cursor a pointer so its more obvious
appenderLink.innerHTML += '[ Delete ]'; //Text for the "fake" link
appenderDiv.appendChild(appenderLink); //Add the "fake" link to the <div />
el.appendChild(appenderDiv); //Add our newly created <input /> element to the parent node
}
function delFileBox(elementNode)
{
/*
Fetch the parent of the parent of the fake link (the outer div)
Fetch the parent of the div (the actual row)
Delete the rwo from the outer div
*/
elementNode.parentNode.parentNode.removeChild(elementNode.parentNode);
}
// -->
</script>
</head>
<body>
<div style="width: 500px; padding: 10px; background: #BBBBFF; border: 1px solid #CCCCCC;">
<div id="fileContainer" style="padding: 10px; background: #F5F5F5;">
<input type="file" name="theFile[]" />
</div>
<div style="padding: 10px; background: #F5F5F5;">
<a href="javascript:addFileBox('fileContainer');">Click here to add another file</a>
</div>
</div>
</body>
</html>