How to add Multiple File Upload Input using jQuery

Multiple file uploads are what I want quite often. I can use multiple file upload field to fulfill that but what if I don’t know how many files will be uploading at a time. May be it is 1 or 2 or 5 or even more than 5. Should I create several static multiple fields for file upload? No I don’t.
With the help of jquery i can create dynamic file upload input and here I am going to show you that how can I achieve this by doing 4 to 5 lines jQuery code.

Also read: How to upload multiple images in PHP and store in Mysql

HTML Code

<div class="form-container">
	<div class="add-more-cont"><a id="add_more"><img src="img/add_icon.jpg">Add More</a></div>
	<form name="uploadFile" action="" method="post" enctype="multipart/form-data" id="upload-form">
		<div class="input-files">
		<input type="file" name="file_upload-1">
		</div>
		<input type="submit" name="submit" value="submit">
	</form>
</div>

</div>

</form>

</div>

CSS

body{
	font-family:verdana;
}

.form-container{
	margin-left:5px;
	margin-top:10px;
}

.input-files input[type=file]{
	display:block;
	border:1px solid #eeeeee;
	position:relative;
	margin-bottom:5px;
	width:250px;
}
.add-more-cont{
margin:10px 0px 10px 0px;
}

#add_more{
	font-size:13px;
	color:blue;
}

#add_more:hover{
	cursor:pointer;
}

.form-container input[type=submit]{
	background:#0072bc;
	height:25px;
	border:1px solid #0767a6;
	color:#ffffff;
}

.error-msg{
	background-color:#f2dede;
	border:1px solid #ebccd1;
	font-size:14px;
	color:#a94442;
	width:350px;
	padding:4px;
	margin-bottom:5px;
}
.success-msg{
	background-color:#dff0d8;
	border:1px solid #d6e9c6;
	font-size:14px;
	color:#3c763d;
	width:350px;
	padding:4px;
	margin-bottom:5px;
}

body{

font-family:verdana;

}

.form-container{

margin-left:5px;

margin-top:10px;

}

.input-files input[type=file]{

display:block;

border:1px solid #eeeeee;

position:relative;

margin-bottom:5px;

width:250px;

}

.add-more-cont{

margin:10px 0px 10px 0px;

}

#add_more{

font-size:13px;

color:blue;

}

#add_more:hover{

cursor:pointer;

}

.form-container input[type=submit]{

background:#0072bc;

height:25px;

border:1px solid #0767a6;

color:#ffffff;

}

.error-msg{

background-color:#f2dede;

border:1px solid #ebccd1;

font-size:14px;

color:#a94442;

width:350px;

padding:4px;

margin-bottom:5px;

}

.success-msg{

background-color:#dff0d8;

border:1px solid #d6e9c6;

font-size:14px;

color:#3c763d;

width:350px;

padding:4px;

margin-bottom:5px;

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
	var id = 1;
	$("#add_more").click(function(){
		var showId = ++id;
		if(showId <=10)
		{
			$(".input-files").append('<input type="file" name="file_upload-'+showId+'">');
		}
	});
});
</script>

$(document).ready(function(){

var id = 1;

$("#add_more").click(function(){

var showId = ++id;

if(showId <=10)

{

$(".input-files").append('<input type="file" name="file_upload-'+showId+'">');

}

});

</script>

In the above jquery code I bind click function with #add_more which is the id of Add more. Every time user click on Add more var showId will add 1 and further I added one condition if(showId <=10) which means user can add input file upload field to maximum 10. If you want to increase or decrease file upload size you can.

How to add Multiple File Upload Input using jQuery

HTML Code

CSS

Published by Ahsan Zameer

Leave a Reply Cancel reply