Bootstrap File Input Replacement Plugin With jQuery

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">

$('input[type=file]').bootstrapFileInput();

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.