bootstrap-filestyle使用与上传失败内容清除
来源:互联网 发布:软件开发的学校 编辑:程序博客网 时间:2024/05/21 09:00
bootstrap-filestyle使用与上传失败内容清除:
bootstrap文件上传插件:
http://markusslima.github.io/bootstrap-filestyle/
使用方法:简要教程
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‘
});
.bootstrap-filestyle为插件解析后的样式类
$(".bootstrap-filestyle").remove();
重新初始化
$('#testCase').filestyle({
size: "sm",
buttonText: '选择文件'
});
阅读全文
0 0
- bootstrap-filestyle使用与上传失败内容清除
- Bootstrap 文件上传插件Filestyle的用法
- springmvc bootstrap-filestyle 多文件上传
- bootstrap-fileinput上传失败反馈信息
- BootStrap FileInput 插件上传使用
- 商品内容页上传图片失败
- Bootstrap下载与使用
- BootStrap简介与使用
- 使用插件Bootstrap Fileinput文件上传
- 关于bootstrap fileupload上传插件的使用
- bootstrap文件上传的使用,带有进度条
- 使用FileUpload接收上传内容
- Bootstrap 的清除浮动
- bootstrap清除浮动
- Bootstrap清除浮动问题
- bootstrap清除浮动
- bootstrap与Select2使用小结
- php绘制图片失败,使用清除缓存ob_clean()可以解决。
- Android快速实现文件下载(只有4行代码)
- c语言中,关于延迟函数的理解
- 公钥加密体系和https
- Plug-in 创建插件项目
- Spark Shuffle之Tungsten-Sort
- bootstrap-filestyle使用与上传失败内容清除
- C语言基础-指针与字符串19
- nginx+django+gunicorn+gevent+supervisor
- 《Django By Example》翻译
- 教你使用gulp搭建一个react本地服务器环境
- android rxjava 2.x 框架性学习
- Redis做消息队列文章两篇 的地址
- 配置maven环境变量
- 解决linux下cannot execute binary file: Exec format error