转载

jQuery实用表单文件域美化插件

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

jQuery实用表单文件域美化插件

查看演示下载插件

使用方法

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

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

复制代码

HTML结构

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

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

复制代码

应用举例

将input元素进行转换

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

javascript方法：

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

复制代码

通过data属性：

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

复制代码

按钮文本

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

javascript方法：

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

复制代码

通过data属性：

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

复制代码

禁用状态

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

javascript方法：

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

复制代码

通过data属性：

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

复制代码

禁用状态 选择文件按钮在输入框的前面。 javascript方法：

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

复制代码

通过data属性：

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

复制代码

输入框的尺寸

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

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

复制代码

通过data属性：

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

复制代码

文本占位

设置输入框的文本占位。 javascript方法：

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

复制代码

通过data属性：

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

复制代码

使用图标

javascript方法：

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

复制代码

通过data属性：

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

复制代码

方法

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'});

复制代码

你也可能会喜欢这个插件： 11种炫酷CSS3复选框checkbox样式美化效果

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Form/201509052525.html

正文到此结束

所属分类：编程技术

本文标签： UI src jquery 插件文件上传 js 实例 ip HTML java 代码 CSS Bootstrap
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

jQuery实用表单文件域美化插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流