基于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 相关文章推荐
Jquery 动态生成表格示例代码
Dec 24 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
回顾Javascript React基础
2019/06/15 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python多线程抓取天涯帖子内容示例
2014/04/03 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Django 大文件下载实现过程解析
2019/08/01 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python脚本定时发送邮件
2020/12/22 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
Ejb技术面试题
2015/04/29 面试题
《小猪家的桃花树》教学反思
2014/04/11 职场文书
班级心理活动总结
2014/07/04 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python