GmailLike attachments: Difference between revisions
From D3xt3r01.tk
Jump to navigationJump to search
mNo edit summary |
|||
| (3 intermediate revisions by the same user not shown) | |||
| Line 32: | Line 32: | ||
var remlink = document.createElement('a'); | var remlink = document.createElement('a'); | ||
remlink.setAttribute("href", "#"); | remlink.setAttribute("href", "#"); | ||
remlink.setAttribute("onclick", | remlink.setAttribute("onclick", "delFileInput('"+divname+"', 'att"+upload_number+"')"); | ||
var imgrem = document.createElement('img'); | var imgrem = document.createElement('img'); | ||
imgrem.setAttribute('src', ' | imgrem.setAttribute('src', 'delicon.png'); | ||
imgrem.setAttribute('alt', 'del'); | |||
imgrem.setAttribute('style', 'border: 0px none;'); | imgrem.setAttribute('style', 'border: 0px none;'); | ||
remlink.appendChild(imgrem); | remlink.appendChild(imgrem); | ||
| Line 52: | Line 53: | ||
<div> | <div> | ||
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /> | <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /> | ||
<a href="#" onclick=" | <a href="#" onclick="addFileInput('moreUploads')"><img src="addicon.gif" alt="add" style="border: 0px none;" /></a> | ||
</div> | </div> | ||
<div id="moreUploads"></div> | <div id="moreUploads"></div> | ||
Latest revision as of 09:02, 10 December 2009
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', 'delicon.png');
imgrem.setAttribute('alt', 'del');
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="addFileInput('moreUploads')"><img src="addicon.gif" alt="add" style="border: 0px none;" /></a>
</div>
<div id="moreUploads"></div>
</form>
</body>
</html>