基于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 相关文章推荐
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python常用列表数据结构小结
2014/08/06 Python
pygame播放音乐的方法
2015/05/19 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
初二数学教学反思
2016/02/17 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android