https://github.com/alexantr/fileinput
Styled file input using jQuery
https://github.com/alexantr/fileinput
fileinput jquery-plugin
Last synced: 2 months ago
JSON representation
Styled file input using jQuery
- Host: GitHub
- URL: https://github.com/alexantr/fileinput
- Owner: alexantr
- License: mit
- Created: 2017-01-10T09:00:35.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2026-02-03T09:09:57.000Z (3 months ago)
- Last Synced: 2026-02-08T01:47:06.527Z (3 months ago)
- Topics: fileinput, jquery-plugin
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery File Input
Simple jQuery plugin for styling HTML file inputs.
## Installation
Install with [npm](https://www.npmjs.com/):
```
npm i --save jquery-fileinput
```
Install with [bower](https://bower.io/):
```
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
×
```