Adding and removing File upload like Gmail
Here is the HTML:
<html>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display =
'block';" />
<div id="moreUploadsLink" style="display:none;">
<a href="javascript:addElement();">Attach another File</a>
</div>
<input type="hidden" value="0" id="theValue" />
<div id="myDiv"> </div>
</html>
Here is the Javascript:
<script language='Javascript'>
function addElement()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="removeElement(' + divIdName
+ ')">Remove </a>';
ni.appendChild(newdiv);
}
function removeElement(divNum)
{
var d = document.getElementById('myDiv');
d.removeChild(divNum);
}
</script>
Gmail most probably ajax to achieve this, i have done with javascript.
Saturday, May 2, 2009
Subscribe to:
Post Comments (Atom)
Site Meter
No comments:
Post a Comment