Features:

Multiple file upload supported
Auto preview
Option to cancel
Option to set file input name
Option to view live file counter
Option to change no. of preview columns
Option to set 'Allowed Files'
Option to set which file type will have previews
Not allowed files will be ignored
Will auto single align on mobile devices
Responsive design
Fully customizable design
Easy to integrate to PHP, JAVA, and other scripting languages

Built with:

HTML5
jQuery
BootStrap

Tested with:

Google Chrome 46.0.24
FireFox 42.0

Support:

Tutorial - Create a File Uploader using jQuery and Bootstrap
GitHub Repo - https://github.com/ConsistentCoder/ccFileUpload
Facebook Page - https://www.facebook.com/ConsistentCoder/
Twitter Page - https://twitter.com/ConsistentCoder/

---

Basic set up: Refer to 'ccFileUpload-basic.html' for demo.

$("#DIV").ccFileUploader();

• Will create an input file with name "file"
• Previews will appear on an element with an ID="previews"
• Live file counter will appear on an element with a CSS class="counter"
• Will have four (4) columns on preview area
• Allowed files are "'gif','png','jpg','jpeg'"
• File types that will have previews are "'gif','png','jpg','jpeg'"

Advanced set up: Refer to 'index.html' for demo.

var options = {
    'name':'myFile',
    'previews':'stage',
    'counter':'countMe',
    'columnClass':'col-md-4 text-center',
    'allowedFiles':['gif','png','jpg','jpeg','xlsx'],
    'allowedPreviews':['jpg','jpeg']
};

$("#DIV").ccFileUploader(options);

• Will create an input file with name "myFile"
• Previews will appear on an element with an ID="stage"
• Live file counter will appear on an element with a CSS class="countMe"
• Will have four (3) columns on preview area (always best with 'text-center' combo)
• Allowed files are "'gif','png','jpg','jpeg','xlsx'" - Do a back-end checking, too.
• File types that will have previews are "'jpg','jpeg'" (obviously, only image files here)

---

IMPORTANT ! ! !

IT IS A MUST TO DO A BACK-END (JAVA/PHP/etc) CHECKING FOR FILE TYPE RESTRICTIONS, TOO.

---

Notes:

• License: MIT
• Copyright: 2015 ConsistentCoder.com (http://consistentcoder.com)