Back jQuery

Simple add / remove file upload box dynamically with jQuery

WRITTEN BY ON 07 May 2012

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


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'/>
	<input type='submit' name='upload' value='Upload'/>

<script type='text/javascript'>
	var counter = 2;
		$('#file_tools').before('<div class="file_upload" id="f'+counter+'"><input name="file[]" type="file">'+counter+'</div>');

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.

Mirko 4 years ago
Please where is the post for this article.
Because on I don't look this project.
Help me please.....
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
Required 2 years ago
Required field
Invalid email
Comment minimum length is 5 characters.
Rodin 1 year ago

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
Germano 7 months ago
I found your code under url 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