基于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 相关文章推荐
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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中去除所有js,html,css代码
2010/10/12 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
定义php常量的详解
2013/06/09 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python对json的相关操作实例详解
2017/01/04 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python常用外部指令执行代码实例
2020/11/05 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
求职推荐信
2013/10/28 职场文书
建筑人员岗位职责
2013/12/25 职场文书
网络工程师职业规划
2014/02/10 职场文书
小学教师寄语大全
2014/04/03 职场文书
同学聚会通知书
2015/04/20 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers