jQuery File Input

Simple jQuery plugin for styling HTML file inputs.

Installation

Install with npm:

``
npm i --save jquery-fileinput
`

Install with bower:

`
bower install fileinput
`

Usage

HTML:

`html


`

`html

`

JavaScript:

`js
$('input[type="file"]').fileinput();
`

Including all options:

`js
$('input[type="file"]').fileinput({
title: 'Browse...',
multipleText: '{0} files', // for multiple selection. {0} will be replaced with number of seleted files
showMultipleNames: false, // if true, show filenames comma separated instead text from multipleText
buttonClass: 'btn btn-default',
selectedClass: 'file-selected',
clearButton: '×',
complete: function() {
// $(this) is input[type="file"]
}
});
`

Almost all options can be redefined by data-attributes:

- data-title
- data-multiple-text
- data-show-multiple-names
- data-button-class
- data-selected-class

Also button title and class can be set from title and class attributes:

`html

`

If you want to disable styling some inputs you can add attribute data-fileinput-disabled to them.

Styling

Included CSS-styles work great with Bootstrap 3.

Just append fileinput.css:

`html


`

Generated HTML-code:

`html


Browse...



`

When file selected:

`html


Browse...



file.zip
×


``