一、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. HDU 6613 Squrirrel 树形dp

    题意:给你一颗树,你可以把这棵树上的一条边的边权变为0,现在让你选一个根,让所有点到这个点的最大距离尽量的小.如果有多个根的最大距离距离相同,输出编号最小的边. 思路:如果没有把边权变为0的操作,这个 ...

  2. Sass--传一个带值的参数

    在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如: @mixin border-radius($radius: 3px) { -webkit-border-radius: $radiu ...

  3. mongodb 索引基础

    一 .索引基础:    MongoDB的索引几乎与传统的关系型数据库一模一样,这其中也包括一些基本的优化技巧.下面是创建索引的命令:    > db.test.ensureIndex({&quo ...

  4. bzoj4007 & loj2111 [JLOI2015]战争调度 复杂度分析+树上背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4007 https://loj.ac/problem/2111 题解 同 [NOI2006]网络 ...

  5. python 时间和时间段显示

    两个包,最开始发现的是time包 import time print(time.time()) #显示当前时间戳 print(time.localtime(time.time())) #显示本地时间 ...

  6. Delphi 运行后错误提示“无效的授权说明”

    Delphi 运行后错误提示“无效的授权说明” 一般情况是:数据库的连接出现了问题. 解决方法:检查加载数据库是否正常,能否正常连接.

  7. 源码分析笔记Vector

    概述 继承抽象类AbStractList,实现接口List.RandomAccess.Cloneable以及序列化接口默认容量大小为10,扩容增量为0,扩容为原容量的2倍如设置的增量大于0,则扩容为( ...

  8. （四）添加yaffs2文件系统支持

    1. 获取yaffs2源码 在linux工作目录下进行clone操作: git clone git://www.aleph1.co.uk/yaffs2 完成后会在当前目录下产生yaffs2的源码目录: ...

  9. windows汇编语言开发环境搭建

    1.下载软件mash32 http://www.masm32.com/download/masm32v11r.zip 此软件包含对汇编文件的编译和运行,下载后直接运行并解压即可 2.配置环境变量 在系 ...

  10. 继承Process类,run函数的简单使用

    #定义一个类 继承Process类 from multiprocessing import Process import os import time class Download(Process): ...