🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ccFileUpload is a lightweight jQuery plugin used to generate a clean, responsive, customizable multi file upload UI with image preview support.

Bootstrap file-input uploader

Documentation

ccFileUpload

A Fully Cutomizable Responsive HTML5 Multiple File Upload Built with jQuery and BootStrap.

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:


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:

 

You May Also Like