Bootstrap File Input Replacement Plugin With jQuery

Bootstrap File Input Replacement Plugin With jQuery
File Size: 5.46 KB
Views Total: 859
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Just another Bootstrap file input replacement plugin used to convert all file input tags into a set of elements that displays consistently in all browsers. Works on most modern browsers and even IE 8/9/10.

How to use it:

1. Load the required Bootstrap's stylesheet in the head section of your html document.

<link href="bootstrap.min.css" rel="stylesheet">

2. Load jQuery library and the bootstrap.file-input.js script at the end of the document.

<script src="jquery.min.js"></script>
<script src="bootstrap.file-input.js"></script>

3. Calling the plugin will convert all file inputs:

<input type="file">

4. Into Bootstrap buttons:

<input type="file">
<a class="btn">Browse</a>

5. Customize the file input with the following attributes:

  • title: text to display in the file input button.
  • data-bfi-disabled: disable the plugin.
  • data-filename-placement: where to place the file name. "outside" or "inside".
<input type="file" title="Search for a file to add" class="btn-primary">

This awesome jQuery plugin is developed by grevory. For more Advanced Usages, please check the demo page or visit the official website.