GmailLike attachments
From D3xt3r01.tk
WHY
Because I felt like wanting to have some way of making a dynamic number of attachments.
HOW
Javascript people. Even if I don't like it too much and I usually block other people's JS with the NoScript addon for firefox.
First, created a parent Div in which all the other divs containing the inputs will be inserted. Then created a function which takes that as a param and creates some elements inserting them into the parent div. A second function removes that from the parent div.
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>test</title>
<script type="text/javascript">
var upload_number = 2;
function delFileInput(divname, rem) {
var d = document.getElementById(divname);
var old = document.getElementById(rem);
d.removeChild(old);
return false;
}
function addFileInput(divname) {
var d = document.createElement("div");
d.setAttribute('id', 'att'+upload_number);
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
d.appendChild(file);
var remlink = document.createElement('a');
remlink.setAttribute("href", "#");
remlink.setAttribute("onclick", 'delFileInput(\''+divname+'\', \'att'+upload_number+'\')');
var imgrem = document.createElement('img');
imgrem.setAttribute('src', 'b_drop.png');
imgrem.setAttribute('style', 'border: 0px none;');
remlink.appendChild(imgrem);
d.appendChild(remlink);
document.getElementById(divname).appendChild(d);
upload_number++;
return false;
}
</script>
</head>
<body>
<form method="post" action="gmaillike.html">
<div>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<a href="#" onclick="addFileImput('moreUploads')"><img src="addicon.gif" style="border: 0px none;" /></a>
</div>
<div id="moreUploads"></div>
</form>
</body>
</html>