Suport IE 8+
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.
This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.
Include:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Via JavaScript:
$(":file").filestyle();
Via data attributes:
<input type="file" class="filestyle">
Via JavaScript:
$(":file").filestyle({input: false});
Via data attributes:
<input type="file" class="filestyle" data-input="false">
Example:
Via JavaScript:
$(":file").filestyle({icon: false});
Via data attributes:
<input type="file" class="filestyle" data-icon="false">
Example:
Via JavaScript:
$(":file").filestyle({buttonText: "Find file"});
Via data attributes:
<input type="file" class="filestyle" data-buttonText="Find file">
Example:
Via JavaScript:
$(":file").filestyle({buttonName: "btn-primary"});
Via data attributes:
<input type="file" class="filestyle" data-buttonName="btn-primary">
Example:
Accepted values: lg, nr, sm
Via JavaScript:
$(":file").filestyle({size: "sm"});
Via data attributes:
<input type="file" class="filestyle" data-size="sm">
Example:
Via JavaScript:
$(":file").filestyle({iconName: "glyphicon glyphicon-inbox"});
Via data attributes:
<input type="file" class="filestyle" data-iconName="glyphicon glyphicon-inbox">
Example:
Via JavaScript:
$(":file").filestyle({disabled: true});
Via data attributes:
<input type="file" class="filestyle" data-disabled="true">
Example:
Via JavaScript:
$(":file").filestyle({buttonBefore: true});
Via data attributes:
<input type="file" class="filestyle" data-buttonBefore="true">
Example:
Via JavaScript:
$(":file").filestyle({badge: true});
Via data attributes:
<input type="file" class="filestyle" data-badge="true">
Example:
Via JavaScript:
$(":file").filestyle({placeholder: "No file"});
Via data attributes:
<input type="file" class="filestyle" data-placeholder="No file">
Example:
$(":file").filestyle('clear');
$(":file").filestyle('destroy');
// get $(":file").filestyle('disabled'); // set $(":file").filestyle('disabled', true);
// get $(":file").filestyle('input'); // set $(":file").filestyle('input', false);
// get $(":file").filestyle('icon'); // set $(":file").filestyle('icon', false);
// get $(":file").filestyle('buttonText'); // set $(":file").filestyle('buttonText', 'Loading...');
// get $(":file").filestyle('buttonName'); // set $(":file").filestyle('buttonName', 'btn-danger'};
// get $(":file").filestyle('iconName'); // set $(":file").filestyle('iconName', 'glyphicon glyphicon-home');
// get $(":file").filestyle('size'); // set $(":file").filestyle('size', 'lg');
// get $(":file").filestyle('buttonBefore'); // set $(":file").filestyle('buttonBefore', 'true');
// get $(":file").filestyle('placeholder'); // set $(":file").filestyle('placeholder', 'My file text');