GmailLike attachments: Difference between revisions

From D3xt3r01.tk
Jump to navigationJump to search
 
Line 36: Line 36:
         var imgrem = document.createElement('img');
         var imgrem = document.createElement('img');
         imgrem.setAttribute('src', 'delicon.png');
         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="addFileInput('moreUploads')"><img src="addicon.gif" style="border: 0px none;" /></a>
         <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>