Bootstrap 文件上传插件Filestyle的用法
来源:互联网 发布:李华清经济学考研知乎 编辑:程序博客网 时间:2024/06/04 22:35
本文转自:http://markusslima.github.io/bootstrap-filestyle/
Get Bootstrap Filestyle
Browser Support
Suport IE 8+
Description
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.
This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.
Requirements
Twitter Bootstrap and jQuery.
Get Start
Include:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Via JavaScript:
$(":file").filestyle();
Via data attributes:
<input type="file" class="filestyle">
Options
input
- Enables or disables the input text. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({input: false});
Via data attributes:
<input type="file" class="filestyle" data-input="false">
Example:
icon
- Enables or disables the button icon. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({icon: false});
Via data attributes:
<input type="file" class="filestyle" data-icon="false">
Example:
buttonText
- Changes the button text. Type: String, Default: "Choose file"
Via JavaScript:
$(":file").filestyle({buttonText: "Find file"});
Via data attributes:
<input type="file" class="filestyle" data-buttonText="Find file">
Example:
buttonName
- Change classes bootstrap button. Type: String, Default: "btn-default"
Via JavaScript:
$(":file").filestyle({buttonName: "btn-primary"});
Via data attributes:
<input type="file" class="filestyle" data-buttonName="btn-primary">
Example:
size
- Change size bootstrap of the button and input. Type: String, Default: "nr"
Accepted values: lg, nr, sm
Via JavaScript:
$(":file").filestyle({size: "sm"});
Via data attributes:
<input type="file" class="filestyle" data-size="sm">
Example:
iconName
- Change classes bootstrap icons. Type: String, Default: "glyphicon-folder-open"
Via JavaScript:
$(":file").filestyle({iconName: "glyphicon-inbox"});
Via data attributes:
<input type="file" class="filestyle" data-iconName="glyphicon-inbox">
Example:
disabled
- Disabled button. Type: Bool, Default: false
Via JavaScript:
$(":file").filestyle({disabled: true});
Via data attributes:
<input type="file" class="filestyle" data-disabled="true">
Example:
buttonBefore
- Button before. Type: Bool, Default: false
Via JavaScript:
$(":file").filestyle({buttonBefore: true});
Via data attributes:
<input type="file" class="filestyle" data-buttonBefore="true">
Example:
badge
- Enables or disables the badge counter. Type: Boolean, Default: true
Via JavaScript:
$(":file").filestyle({badge: false});
Via data attributes:
<input type="file" class="filestyle" data-badge="false">
Example:
Methods
clear
- Clear selected files.
$(":file").filestyle('clear');
destroy
- Destroy a filestyle completely.
$(":file").filestyle('destroy');
disabled
- Disabled a filestyle.
// get$(":file").filestyle('disabled');// set$(":file").filestyle('disabled', true);
input
- Set or get the value of the input option.
// get$(":file").filestyle('input');// set$(":file").filestyle('input', false);
icon
- Set or get the value of the icon option.
// get$(":file").filestyle('icon');// set$(":file").filestyle('icon', false);
buttonText
- Set or get the text of the button.
// get$(":file").filestyle('buttonText');// set$(":file").filestyle('buttonText', 'Loading...');
buttonName
- Set or get the class of the button.
// get$(":file").filestyle('buttonName');// set$(":file").filestyle('buttonName', 'btn-danger'};
iconName
- Set or get the class of the icon.
// get$(":file").filestyle('iconName');// set$(":file").filestyle('iconName', 'glyphicon-home');
size
- Set or get the class of the input text.
// get$(":file").filestyle('size');// set$(":file").filestyle('size', 'lg');
buttonBefore
- Set or get button position.
// get$(":file").filestyle('buttonBefore');// set$(":file").filestyle('buttonBefore', 'true');
- Bootstrap 文件上传插件Filestyle的用法
- springmvc bootstrap-filestyle 多文件上传
- bootstrap文件上传插件
- bootstrap-filestyle使用与上传失败内容清除
- bootstrap文件上传的插件以及使用方法
- Bootstrap的fileinput插件实现多文件上传的方法
- php 应用 bootstrap-fileinput 上传文件 插件 操作的方法
- 基于Bootstrap 3可预览的HTML5文件上传插件
- uploadify异步文件上传插件的用法
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput的ajax异步上传
- 使用插件Bootstrap Fileinput文件上传
- springboot+bootstrap fileupinput 插件实现文件上传
- 支持多文件上传,预览,拖拽的基于bootstrap的上传插件fileinput
- 关于bootstrap fileupload上传插件的使用
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
- bootstrap fileinput 上传插件
- Bootstrap-fileinput插件使用教程 支持多文件上传
- 文件上传预览插件 Bootstrap-fileinput组件封装及使用
- 数据库的基本操作
- Windows下时间测试函数
- MFC ODBC数据库操作编程
- 深入分析Intent匹配查询
- 经典问题-生产者和消费者问题
- Bootstrap 文件上传插件Filestyle的用法
- [leetcode 94] Binary Tree Inorder Traversal
- 1028. 人口普查(20)
- 如何查看mac笔记本是64位还是32为
- Unity学习之GUI基础
- 数据结构第五章 树和二叉树 知识导图
- VMWare虚拟机下为Ubuntu 12.04.1配置静态IP(NAT方式)
- OpenCV学习:如何扫描图像、利用查找表和计时
- 实习周记III