基于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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
Vue通过provide inject实现组件通信
Sep 03 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设计模式之调解者模式的深入解析
2013/06/13 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
奇妙的js
2007/09/24 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python os用法总结
2018/06/08 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
PageFactory设计模式基于python实现
2020/04/14 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python