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.
Step 2 : You can define your url where you want to write a code of 'File Upload' using "data-upload-url". We have added one ajax.php file and set that file in the same directory.
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.
Note : You can download fileinput css and jquery from here and put that in your relevant folder.
- 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.
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
It's Useful.
ReplyDelete