Today most of the sites are converting or trying to use Bootstrap with HTML 5 supports. Client requirements related to UI are so high with awesome functionality in one go with all devices.
If you need some extraordinary "File Upload" feature in your site with enhanced UI and functionality that can impress client pretty much then you are at the right place .. : )
Please find below reference images so that you can have an idea about how it will going to look like
Please find below reference images so that you can have an idea about how it will going to look like
Reference Image 1
Reference Image 2
We are going to show some easy/basic steps that will help you to add functionality of Multiple File Upload with Ajax and PHP using Bootstrap (3.x) followed by HTML 5 file-input.
Below listed steps enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It offers support for previewing a wide variety of files i.e. images, text, html, video, audio, flash, and objects.
Step 1 : Create one index.html file and add below content in body where you want a file upload section.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Bootstrap File Input Example</h1> | |
| <form enctype="multipart/form-data"> | |
| <div class="form-group"> | |
| <input id="file-upload" type="file" class="file" data-upload-url="ajax.php" multiple="multiple" name="files"> | |
| </div> | |
| <div class="form-group"> | |
| <button class="btn btn-default" type="reset">Reset</button> | |
| </div> | |
| </form> | |
| </div> |
You will be able to see files in $_FILES variable in ajax.php which will be called by ajax. You may upload multiple files as well and you will get all files in ajax.php .
Step 3 : Append these files in <head> section.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" type="text/javascript"></script> | |
| <script src="js/fileinput.js" type="text/javascript"></script> |
- CSS : https://github.com/kartik-v/bootstrap-fileinput/blob/master/css/fileinput.css
- JS : https://github.com/kartik-v/bootstrap-fileinput/blob/master/js/fileinput.js
- Images : You will be needing few images so download images from here https://github.com/kartik-v/bootstrap-fileinput/tree/master/img and put these into "img" folder. Make some necessary changes in fileinput.css wherever you will find any path related to image.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> $("#file-upload").fileinput(); </script> |
You are done with the basic code. You can now add extra features and properties that might help you in coding.
This blog is initially inspired by very well written plugin with features.
You can add/use extra options from here as well. GIT-URL .
You can add/use extra options from here as well. GIT-URL .
Contributors :
- Keyur Patel -- Software Developer
- Rahul Dhokia -- Software Developer
You can drop comment for any questions or feedback. We will get back to you soon.
For more such technical blogs, visit us http://www.solutionanalysts.com/blog
For more such technical blogs, visit us http://www.solutionanalysts.com/blog
