jQuery FileStyle

jQuery FileStyle for input file.

Personalize your input file and let the beautiful.

Version 1.5.1

Tweet

Get jQuery Filestyle

Description

The jQuery Filestyle this is a jQuery plugin for filestyle you forget to turn the input file's default browser. Customize as you like, it's yours now.

This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.

Requirements

jQuery.

Get Start

<head>
  <link href="css/jquery-filestyle.min.js">
</head>
<body>
  <input type="file" class="jfilestyle" data-theme="blue" data-input="false">
  <script src="js/jquery.js"></script>
  <script src="js/jquery-filestyle.min.js"></script>
</body>

Options

input

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

Via JavaScript:

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

Via data attributes:

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

Example:

buttonText

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

Via JavaScript:

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

Via data attributes:

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

Example:

disabled

- Disabled button. Type: Boolean, Default: false

Via JavaScript:

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

Via data attributes:

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

Example:

buttonBefore

- Button before. Type: Boolean, Default: false

Via JavaScript:

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

Via data attributes:

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

Example:

inputSize

- Change width of the input. Use units of measurement css. Type: String, Default: "200px"

Via JavaScript:

$(":file").jfilestyle({inputSize: "350px"});

Via data attributes:

<input type="file" class="jfilestyle" data-inputSize="400px">

Example:

placeholder

- Set input placeholder. Type: String, Default: ""

Via JavaScript:

$(":file").jfilestyle({placeholder: "My place holder"});

Via data attributes:

<input type="file" class="jfilestyle" data-placeholder="My place holder">

Example:

Using external icons

Via JavaScript:

$(":file").jfilestyle({buttonText: "<span class='glyphicon glyphicon-folder-open'></span>"});

Via data attributes:

<input type="file" class="jfilestyle" data-buttonText="<span class='glyphicon glyphicon-folder-open'></span>">

Example:

Methods

clear

- Clear selected files.

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

destroy

- Destroy a filestyle completely.

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

input

- Set or get the value of the input option.

// get
$(":file").jfilestyle('input');
// set
$(":file").jfilestyle({'input': false});

buttonText

- Set or get the text of the button.

// get
$(":file").jfilestyle('buttonText');
// set
$(":file").jfilestyle({'buttonText': 'My text'});

disabled

- Set or get the disabled button.

// get
$(":file").jfilestyle('disabled');
// set
$(":file").jfilestyle({'disabled': true});

buttonBefore

- Set or get the buttonBefore.

// get
$(":file").jfilestyle('buttonBefore');
// set
$(":file").jfilestyle({'buttonBefore': true});

inputSize

- Set or get the inputSize.

// get
$(":file").jfilestyle('inputSize');
// set
$(":file").jfilestyle({'inputSize': '400px'});

placeholder

- Set or get the placeholder.

// get
$(":file").jfilestyle('placeholder');
// set
$(":file").jfilestyle({'placeholder': 'My text placeholder'});