GmailLike attachments

From D3xt3r01.tk
Revision as of 10:02, 10 December 2009 by Admin (talk | contribs) (Example)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

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>