基于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 09 Javascript
收藏一些不常用,但是有用的代码
Mar 12 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
js+canvas实现五子棋小游戏
Aug 02 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 zend解密软件绿色版测试可用
2008/04/14 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
python提取页面内url列表的方法
2015/05/25 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
盛大笔试题
2016/11/05 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
初中女生自我鉴定
2013/12/19 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript