Styled file input
npm install jquery-fileinputSimple jQuery plugin for styling HTML file inputs.
Install with npm:
```
npm i --save jquery-fileinput
Install with bower:
``
bower install fileinput
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-titledata-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.
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