jquery Practical Landscaping Input upload build

Download Plugin(5) Brief tutorials

Jquery-filestyle is a simple and practical form file upload domain to beautify the jquery plugin. The plugin can convert a form's File upload field to a style similar to the Bootstrap button group. It provides a large number of data properties to control the file upload domain style, you can customize the button text and icons and so on.

How to use

Uploading a domain beautification plugin using this form file requires the introduction of JQUERY,JQUERY-FILESTYLE.MIN.CSS and Jquery-filestyle.min.js files.

< link href = "Css/jquery-filestyle.min.css" > < script src = "Js/jquery.js" ></ script > < script src = "Js/jquery-filestyle.min.js" ></ script >

HTML Structure

The simplest way to use this is <input> data to convert the file upload domain directly using attributes in the element.

<inputtype="file" class="jfilestyle" data-theme="blue"data-input="false">

Application Examplesconvert the INPUT element

Beautify an ordinary <input> element.

JavaScript method:

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

Through the Data property:

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

button Text

Changes the text on the button. The default value is: "Choose file".

JavaScript method:

$(":file").jfilestyle({buttonText: "查找文件"});

Through the Data property:

<inputtype="file" class="jfilestyle"data-buttonText="查找文件">

disabled State

The settings file is selected for disabled status.

JavaScript method:

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

Through the Data property:

<inputtype="file" class="jfilestyle"data-disabled="true">

disabled State

Select the File button in front of the input box.

JavaScript method:

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

Through the Data property:

<inputtype="file" class="jfilestyle"data-buttonBefore="true">

size of the input box

Sets the size of the file selection field. Using the CSS unit of measurement, the default value is 200px.

JavaScript method:

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

Through the Data property:

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

Text Placeholder

Sets the text placeholder for the input box.

JavaScript method:

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

Through the Data property:

<inputtype="file" class="jfilestyle"data-placeholder="文本占位字符">

using Icons

JavaScript method:

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

Through the Data property:

<inputtype="file" class="jfilestyle"data-buttonText="<span class=‘glyphicon glyphicon-folder-open‘></span>">

Method

• clear: Clears the selected file.

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

• destroy: Destroys an object instance.

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

• Input : Sets or gets the contents of the input field.

  //Get the /code>$ ( ' input ' //Settings $ ( ' input ' : false });

• ButtonText : Sets or gets the text on the button.

  //Get the /code>$ ( ' ButtonText ' //Settings $ ( ' ButtonText ' : "My Text ' });

• Disabled : Sets the button to be unavailable or to get the button state is not available.

  //Get the /code>$ ( ' disabled ' //Settings $ ( ' disabled ' : true });

• Buttonbefore : Sets the button in front of the input box or gets the position of the button.

  //Get the /code>$ ( ' Buttonbefore ' //Settings $ ( ' Buttonbefore ' : True });

• inputsize : Sets or gets the size of the input box.

  //Get the /code>$ ( ' inputsize ' //Settings $ ( ' inputsize ' : 400px ' });

• placeholder: Sets or gets the placeholder text.

  // 获取$(":file").jfilestyle(‘placeholder‘);// 设置$(":file").jfilestyle({‘placeholder‘: ‘My text placeholder‘});

jquery Practical Landscaping Input upload build