Back jQuery

Simple add / remove file upload box dynamically with jQuery

WRITTEN BY ON 07 May 2012
39,087 VIEWS • SHARES
5 comments

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>

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

5 comments
Mirko 4 years ago
Please where is the post for this article.
Because on http://www.mongiddesigns.com I don't look this project.
Help me please.....
http://www.mongiddesigns.com
Reply
nihar 3 years ago
Nice code. It is working fine for me... I have only simple request ... please let me send the "mongid.css" file if you can!!!

Thanks & regards
Reply
Required 2 years ago
Required field
Invalid email
Comment minimum length is 5 characters.
Reply
Rodin 1 year ago
Hello,

Thanks for this tuto, but I think that you did forget the css code.

Can you put it here or it is very pleased if you can send it to me.

Thank you
Reply
Germano 8 months ago
I found your code under url http://www.queness.com/code-snippet/11435/simple-addremove-file-upload-box-dynamically-with-jquery useful despite the fact that it was written 4 years ago . I ask for a help, how to limit 6 uploads? How to add image to the server and image urls to mysql database

Please Help

Reply