基于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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
可以将word转成html的js代码
Apr 11 Javascript
jquery插件validate验证的小例子
May 08 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
Js数组扁平化实现方法代码总汇
Nov 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 session_start()问题解疑(详细介绍)
2013/07/05 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
潜说js对象和数组
2011/05/25 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python生成密码库功能示例
2017/05/23 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
详解python中init方法和随机数方法
2019/03/13 Python
浅析Python迭代器的高级用法
2020/07/16 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
小区门卫管理制度
2014/01/29 职场文书
师说教学反思
2014/02/07 职场文书
励志演讲稿800字
2014/08/21 职场文书
退学证明范本3篇
2014/10/29 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
贫困生证明范文
2015/06/16 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL