Back jQuery

Simple add / remove file upload box dynamically with jQuery

WRITTEN BY ON 07 May 2012
39,138 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 2 years 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 10 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