GmailLike attachments

From D3xt3r01.tk
Revision as of 09:02, 10 December 2009 by Admin (talk | contribs) (→‎Example)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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>