jQuery实用美化input 上传组建

jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件。该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式。它提供了大量的data属性来控制文件上传域的样式，可以自定义按钮文本和图标等。

 使用方法

使用该表单文件上传域美化插件需要引入jquery，jquery-filestyle.min.css和jquery-filestyle.min.js文件。

 HTML结构

最简单的使用方法是在<input>元素中使用data属性来直接转换文件上传域。

 应用举例

 将input元素进行转换

将一个普通的<input>元素进行美化。

javascript方法：

通过data属性：

 按钮文本

改变按钮上的文本。默认值为："Choose file"。

javascript方法：

通过data属性：

 禁用状态

设置文件选择为禁用状态。

javascript方法：

通过data属性：

 禁用状态

选择文件按钮在输入框的前面。

javascript方法：

通过data属性：

 输入框的尺寸

设置文件选择域的尺寸。使用CSS测量单位，默认值为200px。

javascript方法：

通过data属性：

 文本占位

设置输入框的文本占位。

javascript方法：

通过data属性：

 使用图标

javascript方法：

通过data属性：

 方法

• clear：清空选择的文件。

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

• destroy：销毁对象实例。

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

• input：设置或获取输入域的内容。

  // 获取 $(":file").jfilestyle(‘input‘); // 设置 $(":file").jfilestyle({‘input‘: false});

• buttonText：设置或获取按钮上的文本。

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

• disabled：设置按钮为不可用或获取按钮状态是否为不可用。

  // 获取 $(":file").jfilestyle(‘disabled‘); // 设置 $(":file").jfilestyle({‘disabled‘: true});

• buttonBefore：设置按钮在输入框前面或获取按钮的位置。

  // 获取 $(":file").jfilestyle(‘buttonBefore‘); // 设置 $(":file").jfilestyle({‘buttonBefore‘: true});

• inputSize：设置或获取输入框的尺寸。

  // 获取 $(":file").jfilestyle(‘inputSize‘); // 设置 $(":file").jfilestyle({‘inputSize‘: ‘400px‘});

• placeholder：设置或获取占位文本。

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