Start creating buttons as shown in the above examples by using markup and jQuery.Ĭredits: The plug-in website A Bootstrap form with input file and PHP upload script I have placed it in the JS folder for the demos, and used this line to refer: You may get it from the plug-in site (link given below). Include Bootstrap FileStyle plug-in file: You also need to include jQuery library, for example: You need both CSS and JavaScript files e.g.: Include the Bootstrap framework files from CDN or host it at your own. Setting up Bootstrap file upload plugin for your projectįollow these steps to set up this great plug-in to create the beautiful and customized Bootstrap / jQuery based file upload buttons: The button is initialized via data attribute: See the demo and code by clicking the link or image below: You have to include four dependency files in the section for these demos to works (see the setup guide at the bottom part). In the following demo, bootstrap-filestyle plug-in is used to create a file selection field. The last demo is a sign-up form with PHP code to show you how to upload files while using this plug-in. Let me start from simple to more stylish examples with icons in upload form controls to a complete form demo.Īfter demos, you can see a step by step guide to set up this plug-in. The guide is using a plug-in, bootstrap-filestyle, which is available at Github website (credit link is given below). You may use your own or third party solutions for that.įollowing is a guide to setup Bootstrap file upload field if you are working in the Bootstrap framework and also included jQuery library. This is not provided in the default classes by Bootstrap. This is generally desired to match upload file button with the rest of form fields in a web page, otherwise, it looks ugly and unmatched. However, designing and changing the text and design of file upload button is a tedious task.

Jquery multiple file upload example