Simple add / remove file upload box dynamically with jQuery

simple way to make a multi-file upload by adding or removing input tags easly bu MONGID DESIGNS

HTML/XHTML

Put this code in the for css style file and jquery file

<link href="mongid.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

JS - jQuery

this is the rest of the code you should put it were ever you want, it includes html form code and jquery code
the thing is that you'll have a 1 file input and beside it there is a (add) green button when you press it a new input file will appears and beside it there is a new (remove) red button, this button will be hidden if there is just 1 input file.

<form method='post' enctype='multipart/form-data' action=''>
	<div class='file_upload' id='f1'><input name='file[]' type='file'/>1</div>
	<div id='file_tools'>
		<img src='images/file_add.png' id='add_file' title='Add new input'/>
		<img src='images/file_del.png' id='del_file' title='Delete'/>
	</div>
	<input type='submit' name='upload' value='Upload'/>
</form>

<script type='text/javascript'>
$(document).ready(function(){
	var counter = 2;
	$('#del_file').hide();
	$('img#add_file').click(function(){
		$('#file_tools').before('<div class="file_upload" id="f'+counter+'"><input name="file[]" type="file">'+counter+'</div>');
		$('#del_file').fadeIn(0);
	counter++;
	});
	$('img#del_file').click(function(){
		if(counter==3){
			$('#del_file').hide();
		}   
		counter--;
		$('#f'+counter).remove();
	});
});
</script>