Bootstrap 文件上传插件Filestyle的用法

本文转自：http://markusslima.github.io/bootstrap-filestyle/

Get Bootstrap Filestyle

Project on Github Production
version Development version

Browser Support

Suport IE 8+

Description

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.

Requirements

Twitter Bootstrap and jQuery.

Get Start

Include:

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Via JavaScript:

$(":file").filestyle();

Via data attributes:

<input type="file" class="filestyle">

Options

input

- Enables or disables the input text. Type: Boolean, Default: true

Via JavaScript:

$(":file").filestyle({input: false});

Via data attributes:

<input type="file" class="filestyle" data-input="false">

Example:

Choose file

icon

- Enables or disables the button icon. Type: Boolean, Default: true

Via JavaScript:

$(":file").filestyle({icon: false});

Via data attributes:

<input type="file" class="filestyle" data-icon="false">

Example:

Choose
file

buttonText

- Changes the button text. Type: String, Default: "Choose file"

Via JavaScript:

$(":file").filestyle({buttonText: "Find file"});

Via data attributes:

<input type="file" class="filestyle" data-buttonText="Find file">

Example:

Find
file

buttonName

- Change classes bootstrap button. Type: String, Default: "btn-default"

Via JavaScript:

$(":file").filestyle({buttonName: "btn-primary"});

Via data attributes:

<input type="file" class="filestyle" data-buttonName="btn-primary">

Example:

Choose
file

size

- Change size bootstrap of the button and input. Type: String, Default: "nr"

Accepted values: lg, nr, sm
Via JavaScript:

$(":file").filestyle({size: "sm"});

Via data attributes:

<input type="file" class="filestyle" data-size="sm">

Example:

Choose
file

iconName

- Change classes bootstrap icons. Type: String, Default: "glyphicon-folder-open"

Via JavaScript:

$(":file").filestyle({iconName: "glyphicon-inbox"});

Via data attributes:

<input type="file" class="filestyle" data-iconName="glyphicon-inbox">

Example:

Choose
file

disabled

- Disabled button. Type: Bool, Default: false

Via JavaScript:

$(":file").filestyle({disabled: true});

Via data attributes:

<input type="file" class="filestyle" data-disabled="true">

Example:

Choose
file

buttonBefore

- Button before. Type: Bool, Default: false

Via JavaScript:

$(":file").filestyle({buttonBefore: true});

Via data attributes:

<input type="file" class="filestyle" data-buttonBefore="true">

Example:

Choose
file

badge

- Enables or disables the badge counter. Type: Boolean, Default: true

Via JavaScript:

$(":file").filestyle({badge: false});

Via data attributes:

<input type="file" class="filestyle" data-badge="false">

Example:

Choose file

Methods

clear

- Clear selected files.

$(":file").filestyle('clear');

destroy

- Destroy a filestyle completely.

$(":file").filestyle('destroy');

disabled

- Disabled a filestyle.

// get
$(":file").filestyle('disabled');
// set
$(":file").filestyle('disabled', true);

input

- Set or get the value of the input option.

// get
$(":file").filestyle('input');
// set
$(":file").filestyle('input', false);

icon

- Set or get the value of the icon option.

// get
$(":file").filestyle('icon');
// set
$(":file").filestyle('icon', false);

buttonText

- Set or get the text of the button.

// get
$(":file").filestyle('buttonText');
// set
$(":file").filestyle('buttonText', 'Loading...');

buttonName

- Set or get the class of the button.

// get
$(":file").filestyle('buttonName');
// set
$(":file").filestyle('buttonName', 'btn-danger'};

iconName

- Set or get the class of the icon.

// get
$(":file").filestyle('iconName');
// set
$(":file").filestyle('iconName', 'glyphicon-home');

size

- Set or get the class of the input text.

// get
$(":file").filestyle('size');
// set
$(":file").filestyle('size', 'lg');

buttonBefore

- Set or get button position.

// get
$(":file").filestyle('buttonBefore');
// set
$(":file").filestyle('buttonBefore', 'true');