一、bootstrap-fileinput

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8"/>

        <title>Bootstrap 上传文件组件</title>

        <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

        <link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.8/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <script src="http://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js" type="text/javascript"></script>

        <script href="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

        <style> 

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row myCenter">

                <div class="col-xs-6 col-md-6 col-center-block">

                    <div class="container kv-main">

                        <h4>Bootstrap 多文件上传实例</h4>

                        <form enctype="multipart/form-data">

                            <label>多文件预览上传实例</label>

                            <input id="file-select" name="file-select[]" type="file" multiple>

                        </form>

                        <hr>

                        <br>

                    </div>

                </div>

            </div>

        </div>

    </body>

    <script>

    $('#file-select').fileinput({

        language: 'fr',

        uploadUrl: '#',

        allowedFileExtensions : ['jpg', 'png','gif'],

        'elErrorContainer': '#errorBlock'

    });

    </script>

</html>

　　

五、bootstrap-fileinput的更多相关文章

  1. Bootstrap fileinput.js，最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  2. Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...

  3. Bootstrap FileInput中文API文档

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  4. Spring Boot+BootStrap fileInput 多图片上传

    一.依赖文件 <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/c ...

  5. 【转】Bootstrap FileInput中文API整理

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  6. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  7. bootstrap fileinput添加上传成功回调事件

    国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...

  8. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  9. bootstrap fileinput 使用记录

    第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...

  10. 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置

    在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...

随机推荐

  1. java类的加载与初始化

    https://blog.csdn.net/u013349237/article/details/71076617 1在命令行启动虚拟机jvm进行加载, 2用class.forname()方法进行动态 ...

  2. Git初始化本地仓库及管理远程仓库github

    1.首先在本地安装git,地址:https://git-scm.com/downloads.下载安装好git工具. 2.将自己在github上的注册的用户名和邮箱写入本地git的配置文件中: (1). ...

  3. mysql跟踪sql

    mysql中执行的sql跟踪比oracle简单多了,它自身有log.我们只要打开这个log记录,执行sql语句,再查看这个log就可以了.1. 首先要打开log的开关使用命令:show variabl ...

  4. Maven 错误: Unknown lifecycle phase ".sourceforge.javacsv". You must specify a valid lifecycle phase or a goal

    这是在Win10系统下,将Jar包手工导入进Maven本地仓库,使用PowerShell执行命令报的错. 命令如下: mvn install:install-file -Dfile=E:\Worksp ...

  5. 神经网络学习笔记（二）：feedforward和feedback

    维基百科解释: Feed-forward, sometimes written feedforward, is a term describing an element or pathway with ...

  6. Android自动化测试框架UIAutomator原理浅析

    UIAutomator是一个Android自动化测试框架,是谷歌在Android4.1版本发布时推出的一款用Java编写的UI测试框架,它只能用于UI即黑盒方面的测试.所以UIAutomator只能运 ...

  7. 安装和使用Redis【转】

    Redis是一个高性能的内存数据库,它体积轻巧性能又高,在企业中被广泛使用. 安装Redis Windows安装 Redis是为Linux系统设计的,但是也有团队为Windows做了移植.我们可以到这 ...

  8. 防止NSTimer和调用对象之间的循环引用

    防止NSTimer和调用对象之间的循环引用 @interface NSTimer (EOCBlocksSupport) + (NSTimer *)eoc_scheduledTimerWithTimeI ...

  9. （转）Java 原子性引用 AtomicReference

    链接:https://www.jianshu.com/p/882d0e2c3ea6 來源:简书  作者:专职跑龙套 AtomicReference An object reference that m ...

  10. yii之relations关联非主键

    yii的relations里self::BELONGS_TO默认是用当前指定的键跟关联表的主键进行join,例如: return array('reply' => array(self::BEL ...