Create Custom File Input Button With jQuery – fileinput.js

In this post I am going to share simple jQuery plugin-fileinput.js which replaces the default file input button into a customizable Browse button which enables the user to browse and select multiple file(s) from local with custom design. The plugin is easily integrated with Bootstrap framework and you can also create your own styles in the CSS. To clear the file input, just click the ‘X’ button displayed at the end of the selected file(s).

Create Custom File Input Button With jQuery

Libraries

Add the following library on page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="fileinput.css">
 

<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous">script>
<script src="fileinput.min.js">script>

HTML

Add a simple file input box.

Now call the plugin’s function on page.

$(function() {  
 $('input[type="file"]').fileinput();
});

Now it’s simplay convert default file input box into

You can also pass following properties in plugins function to customize the file inputbox look and feel.

$(function() { 
 $('input[type="file"]').fileinput({
    title: 'Browse...',
    multipleText: '{0} files', // for multiple selection. {0} will be replaced with number of seleted files
    showMultipleNames: true, // if true, show filenames comma separated instead text from multipleText
    buttonClass: 'btn btn-info',
    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

See live demo and download source code.

This awesome jQuery plugin is developed by Mictronics. Visit their official github repository for more information and follow for future updates.

Related