基于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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
大学生创业计划书的用途
2014/01/08 职场文书
建筑个人求职信范文
2014/01/25 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
搞笑结婚保证书
2015/05/08 职场文书