基于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 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
JS实现鼠标移动拖尾
Dec 27 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基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue头像处理方案小结
2018/07/26 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python configparser模块操作代码实例
2020/06/08 Python
应用化学专业本科生求职信
2013/09/29 职场文书
自荐信模版
2013/10/24 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
大学毕业感言50字
2014/02/07 职场文书
三方合作协议书范本
2014/04/18 职场文书
个人自荐材料
2014/05/23 职场文书
市场调查策划方案
2014/06/10 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
面试感谢信范文
2015/01/22 职场文书
董事长新年致辞
2015/07/29 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
Python学习之迭代器详解
2022/04/01 Python