jQuery Fileselect Plugin Demos

Bootstrap fileselect will replace the browser-specific styled file input fields...

...to bootstrap-styled form controls.

<input id="demo1" type="file" name="demo" />
<script>
    $('#demo1').fileselect();
</script>

Same behaviour as mentioned in the basic example, but you can choose multiple files now.

<input id="demo2" type="file" name="demo" multiple />
<script>
    $('#demo2').fileselect();
</script>

You can set 3 types of validation rules:

• Limit the number of uploadable files
• Restrict the allowed file extensions
• Restrict the allowed file size

<input id="demo3" type="file" name="demo" multiple />
<script>
    $('#demo3').fileselect({
        allowedNumberOfFiles: 3, // default: false, no limitation
        allowedFileExtensions: ['zip'] // default: false, all extensions allowed
        allowedFileSize: 2097152 // 2MB, default: false, no limitation
    });
</script>

You can define the css class(es) of the browse button.

<input id="demo4" type="file" name="demo" multiple />
<script>
    $('#demo4').fileselect({
        browseBtnClass: 'btn btn-danger', // default: btn btn-primary
    });
</script>

The plugin will use the browser language, but you can also define a language. If the defined language isn't supported, then the plugin will fallback to the english translations.

<input id="demo5" type="file" name="demo" multiple />
<script>
    $('#demo5').fileselect({
        language: 'de' // default: false, browser language
    });
</script>

Define your custom validation callback if you don't want to get an alert message..

<input id="demo6" type="file" name="demo" />
<script>
    $('#demo6').fileselect({
        allowedFileExtensions: ['xyz'],
        validationCallback: function (m, type, instance) {
            instance.$inputGroup
                    .after('<span class="small text-danger">' + m + '</span>');
        }
    });
</script>

Bootstrap Fileselect has more than 5 events for customized event listeners:

• Before (bs.fs.validate) and after (bs.fs.validated) each validation
• Before (bs.fs.file-size-validate) and after (bs.fs.file-size-validated) file size validation
• Before (bs.fs.number-of-files-validate) and after (bs.fs.number-of-files-validated) number of files validation
• Before (bs.fs.file-extensions-validate) and after (bs.fs.file-extensions-validated) file extensions validation
• Before (bs.fs.change) and after (bs.fs.changed) each change

<input id="demo7" type="file" name="demo" />
<script>
    $('#demo7')
            .fileselect()
            .on('bs.fs.changed', function (e, instance) {
                alert('New file selected: ' + instance.$fileInput.val());
            });
</script>