jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件。该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式。它提供了大量的data属性来控制文件上传域的样式,可以自定义按钮文本和图标等。
使用方法
使用该表单文件上传域美化插件需要引入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结构
最简单的使用方法是在<input>
元素中使用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‘
});