一、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. DFSORT

    1.1   Outline   I.             Introduction Overview 2.1    What is DFSORT? 2.2    Usage of DFSORT 2 ...

  2. javascript 设置cookie和取得cookie

    代吗实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. bzoj1004 [HNOI2008]Cards Burnside 引理+背包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1004 题解 直接 Burnside 引理就可以了. 要计算不动点的个数,那么对于一个长度为 \ ...

  4. Python 分段利润提成

    题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万之 ...

  5. hadoop中mapreduce的mapper抽象类和reduce抽象类

    mapreduce过程key 和value分别存什么值 https://blog.csdn.net/csdnliuxin123524/article/details/80191199 Mapper抽象 ...

  6. Spring Transaction Propagation

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11530611.html REQUIRED behavior Spring REQUIRED behav ...

  7. Android USB驱动源码分析（-）

    Android USB驱动中,上层应用协议里最重要的一个文件是android/kernel/drivers/usb/gadget/android.c.这个文件实现USB的上层应用协议. 首先包含了一些 ...

  8. BZOJ 2694: Lcm 莫比乌斯反演 + 积性函数 + 线性筛 + 卡常

    求 $\sum_{i=1}^{n}\sum_{j=1}^{m}lcm(i,j)\mu(gcd(i,j))^2$   $\Rightarrow \sum_{d=1}^{n}\mu(d)^2\sum_{i ...

  9. HTTP的FormData和Payload的传输格式

    FormData和Payload是浏览器传输给接口的两种格式,这两种方式浏览器是通过Content-Type来进行区分的(了解Content-Type),如果是 application/x-www-f ...

  10. 2018-2019-2 20175223 实验四 《Android开发基础》实验报告

    目录 北京电子科技学院(BESTI)实验报告 实验名称:实验四 Android程序设计 实验内容.步骤与体会: 一.实验四 Android程序设计-1 二.实验四 Android程序设计-2 三.实验 ...