GmailLike attachments: Difference between revisions

From D3xt3r01.tk
Jump to navigationJump to search
m New page: ==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 peopl...
 
mNo edit summary
Line 9: Line 9:
==Example==
==Example==


<source lang="html">
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<head>

Revision as of 07:04, 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', '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>