基于bootstrap的文件上传控件bootstrap fileinput

 更新时间:2016年12月23日 08:46:18   作者:程序猿hu  
这篇文章主要为大家详细介绍了基于bootstrap的文件上传控件bootstrap fileinput,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了文件上传控件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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js在指定位置增加节点函数insertBefore()用法实例

    js在指定位置增加节点函数insertBefore()用法实例

    这篇文章主要介绍了js在指定位置增加节点函数insertBefore()用法,实例分析了insertBefore()函数追加结点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 原生js页面滚动延迟加载图片

    原生js页面滚动延迟加载图片

    这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道,各种网站都有应用,尤其是专业的图片类型的网站,感兴趣的朋友可以参考下
    2015-12-12
  • 25个好玩的JavaScript小游戏分享

    25个好玩的JavaScript小游戏分享

    JavaScript 早已不只是一门写写网页特效的脚本语言了,如今广泛用于网站的前端交互。
    2011-04-04
  • 用JS实现简单的屏幕录像机功能

    用JS实现简单的屏幕录像机功能

    这篇文章主要给大家介绍了如何用JS实现简单的屏幕录像机,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • 微信小程序生成海报分享朋友圈的实现方法

    微信小程序生成海报分享朋友圈的实现方法

    利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • 实现在 Chrome 中执行 JavaScript 代码

    实现在 Chrome 中执行 JavaScript 代码

    这篇文章主要介绍了实现在 Chrome 中执行 JavaScript 代码,下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码,具有一的的参考价值,需要的朋友可以参考一下
    2022-03-03
  • JS手写一个自定义Promise操作示例

    JS手写一个自定义Promise操作示例

    这篇文章主要介绍了JS手写一个自定义Promise操作,结合实例形式分析了JS自定义Promise的实现与使用相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • es6 字符串String的扩展(实例讲解)

    es6 字符串String的扩展(实例讲解)

    下面小编就为大家带来一篇es6 字符串String的扩展(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 简短几句 通俗解释javascript的闭包

    简短几句 通俗解释javascript的闭包

    什么是闭包呢?闭包就是函数实例执行过程中动态产生一个没有被释放资源的栈区,也是一个预执行的过程。
    2011-01-01
  • js中let和var定义变量的区别

    js中let和var定义变量的区别

    这篇文章主要介绍了js中let和var定义变量的区别,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02

最新评论