基于bootstrap的文件上传控件bootstrap fileinput


Posted in Javascript onDecember 23, 2016

本文实例为大家分享了文件上传控件bootstrap fileinput的使用方法,供大家参考,具体内容如下

github地址:https://github.com/kartik-v/bootstrap-fileinput
官网:http://plugins.krajee.com/file-input

1.下载压缩文件.

2.导入文件

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

如果需要考虑中文化,那么还需要引入文件:

bootstrap-fileinput/js/fileinput_locale_zh.js

<link type="text/css"rel="stylesheet"href="${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>

<body>
<input type="file" name="image" class="projectfile" value="image.png"/>
<!--
1. type=file和class=projectfile,指明其为input file类型。 
2. name指定其在后台的获取key。 
3. value指定其在展示的时候图片路径。
-->
</body>
<script>
 control.fileinput({
 language: 'zh', //设置语言
 uploadUrl: uploadUrl, //上传的地址
 allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
 showUpload: false, //是否显示上传按钮
 showCaption: false,//是否显示标题
 browseClass: "btn btn-primary", //按钮样式  
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
 });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
Bootstrap CSS使用方法
Dec 23 #Javascript
Bootstrap源码解读导航(6)
Dec 23 #Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 #Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
You might like
php.ini中文版
2006/10/09 PHP
php 获取客户端的真实ip
2009/11/30 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
React Router基础使用
2017/01/17 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python实现将内容分行输出
2015/11/05 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python 队列详解及实例代码
2016/10/18 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Django缓存系统实现过程解析
2019/08/02 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python如何存储数据到json文件
2020/03/09 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
自我鉴定范文300字
2013/10/01 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年民警工作总结
2014/11/25 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书