Edit in JSFiddle

function init() {

    $('#example1 input:file').betterInputFile();

    $('#example2 input:file').betterInputFile({
        btnText: "Browse files"
    });


    $('#example3 input:file').betterInputFile({
        btnText: 'Select multiple files',
        placeholder: 'No files selected',
        multiple: true,
        afterSelect: function (filelist) {
            if (filelist.length < 1) {
                $('#list .panel-footer').html('');
                $('#list').addClass('hide');
                return;
            }

            $('#list').removeClass('hide');
            var output = '';
            $.each(filelist, function (key, file) {
                output += '<li>' + file.name + '</li>';
            });
            output = '<ul class="filelist">' + output + '</li>';
            $('#list .panel-footer').html(output);
        }
    });
    
    $('#example4 input:file').betterInputFile({
        btnLeft: false
    });

}

init();

<a href="https://github.com/Lukas238/better-input-file"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
        
        
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            
<h1>Better-input-file-button</h1>

            <div id="example1">
                 <h3>Example1</h3>

                <p>Single input file.</p>
                <input type="file" /> <pre>
&lt;input type=&quot;file&quot; /&gt;
&lt;script&gt;
    $('#example1 input:file').betterInputFile();
&lt;/script&gt;
    </pre>

            </div>
            <hr>
            <div id="example2">
                 <h3>Example2</h3>

                <p>Multiple input files, but one with diferent inline options:</p>
                <input type="file" />
                <input type="file" />
                <input type="file" data-btnText="Upload image" data-placeholder="No image selected" /> <pre>
&lt;input type=&quot;file&quot; /&gt;
&lt;input type=&quot;file&quot; /&gt;
&lt;input type=&quot;file&quot; data-btnText=&quot;Upload image&quot; data-placeholder=&quot;No image selected&quot; /&gt;  

&lt;script&gt;
    $('#example2 input:file').betterInputFile({
        btnText: "Browse files"
    });
&lt;/script&gt;
    </pre>

            </div>
            <hr>
            <div id="example3">
                 <h3>Example3</h3>

                <p>Multifile input file and a call back to populate a file list</p>
                <input type="file" />
                <div id="list" class="hide panel panel-default">
                    <div class="panel-body">List of files</div>
                    <div class="panel-footer"></div>
                </div> <pre>
&lt;input type=&quot;file&quot; /&gt;

&lt;script&gt;
$('#example3 input:file').betterInputFile({
        btnText: 'Select multiple files',
        placeholder: 'No files selected',
        multiple: true,
        afterSelect: function(filelist){   
            if(filelist.length&lt;1){
                $('#list .panel-footer').html('');
                $('#list').addClass('hide');
                return;
            }
            
            $('#list').removeClass('hide');
            var output = '';          
            $.each(filelist, function(key, file){
                output += '&lt;li&gt;'+file.name+'&lt;/li&gt;';
            })
            output = '&lt;ul class=&quot;filelist&quot;&gt;'+output+'&lt;/li&gt;';
            $('#list .panel-footer').html(output);
        }
    })
&lt;/script&gt;
    </pre>

            </div>
             <hr>
            <div id="example4">
                 <h3>Example4</h3>
                  <input type="file" />
            </div>
        </div>
    </div>
</div>