Friday, 6 July 2018

How to add Multiple File Upload Input using jQuery

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.

HTML Code

1
2
3
4
5
6
7
8
9
10
11
 
<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>
 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
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;
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<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>
 
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.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)