一、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-5378 概率DP

    题意:给定一棵有n个节点的树,现在要给节点附1~n的权值(各节点权值不能相同),一棵子树的领袖就是子树中权值最大的节点,问有多少种分配方案使得最后有恰好K个领袖. 解法:这道题一看以为是树上的计数问题 ...

  2. Nginx配置参数详解参考示例

    user nobody; worker_processes 2; events{ worker_connections 1024; } http{ #设置默认类型为二进制流 default_type ...

  3. 分享学做的一个jsp注册页面

    分享一个自己学习时,用bootstrap,多方搜索做的注册页面,包括页面的非空验证.导入相关的bootstrap的js和css文件就可以了.背景很丑,可以自己换一个.后面进一步完善<(￣︶￣)↗ ...

  4. 如何将 不确定的有穷自动机(NFA) 转化为 确定的有穷自动机(DFA) 并将DFA最简化

    一.从NFA到DFA的转换 例如下图: DFA的每个状态都是一个由NFA中的状态构成的集合,即NFA状态集合的一个子集 r =aa*bb*cc* 二.从带有ε-边的NFA到DFA的转换 r=0*1*2 ...

  5. nyoj 83:迷宫寻宝（二）（计算几何）

    题目链接 枚举所有墙的2n个端点与宝物的位置作为一条线段(墙的端点必定与边界重合), 求出与之相交的最少线段数(判断线段相交时用跨立实验的方法),+1即为结果. #include<bits/st ...

  6. 双十一高并发场景背后的数据库RDS技术揭秘

    [战报]11月11日聚石塔(阿里云数据库RDS产品形态)峰值QPS突破X00w,Proxy 峰值QPS超过X00w. 双十一就要来了,全世界都为其疯狂,但是在双十一抢购中经常会出现几万人抢一个红包或者 ...

  7. 生成100个 "20180520" 这样的时间字符串 写入txt文件

    主要想记录一下 . 写NSString 到txt . 数组的去重 . 数组的截取 . 数组分割 代码如下: NSString *year = @"2018"; NSArray *m ...

  8. IDEA不认识jstl

    解决方案:一.在pom.xml文件查看是否<packaging>的值是否是war  二:在jsp文件中加上这句话. <%@page isELIgnored="false&q ...

  9. Problem accessing /jenkins/. Reason:

    这是一个Jenkins的Bug.临时解决方法是:在浏览器中手工输入:http://<ip>:<port>.不要访问"/jenkins"这个路径.

  10. Red Hat 6网络配置笔记

    1.重启网卡/etc/init.d/network restart server network restart2.运行结果报错 关闭NetworkManagerservice NetworkMana ...