Saturday, May 2, 2009

Gmail Like File upload and Remove

Adding and removing File upload like Gmail

Here is the 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>
<input type="hidden" value="0" id="theValue" />
<div id="myDiv"> </div>

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.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="removeElement(' + divIdName
+ ')">Remove </a>';

function removeElement(divNum)
var d = document.getElementById('myDiv');


Gmail most probably ajax to achieve this, i have done with javascript.

No comments:

Site Meter