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


CSS

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.

Also read:

 

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.

Leave a Reply

Your email address will not be published. Required fields are marked *