基于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基础之undefined与null的区别分析
Aug 08 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
js对象的比较
2011/02/26 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
MYSQL基础面试题
2012/05/13 面试题
关于是否需要写商业计划书
2014/02/07 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
python神经网络编程之手写数字识别
2021/05/08 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python