基于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中dom对象方法汇总
Sep 17 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
django使用admin站点上传图片的实例
2019/07/28 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
程序员岗位职责
2013/11/11 职场文书
《灯光》教学反思
2014/02/08 职场文书
一年级学生期末评语
2014/04/21 职场文书
消防安全标语
2014/06/07 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
小学重阳节活动总结
2015/03/24 职场文书
开学典礼致辞
2015/07/29 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang