一、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. （转载）python判断一个字符串是否是小数

    转载自:牛牛杂货铺 最近在写代码的时候,发现一个问题,想判断一个字符串是不是一个合法的小数,发现字符串没有内置判断小数的方法,然后就写了一个判断字符串是否是小数,可以判断正负小数,代码如下: def ...

  2. C# 微信公众号开发本地IIS调试

    由于最近公司需要自己开发微信,这个任务也就交给我了,由于第一次接触开发微信,所以也踩了不少坑,不过园子里文章也很多,也借鉴了不少文章,弯路也是少走了不少,现在将我自己踩的坑或者一些经验留下来,希望能帮 ...

  3. vue星级评分组件

    <template> <div class="Rating-gray"> <i v-for="(item,index) in itemCla ...

  4. spring boot启动异常：java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver

    项目启动时提示:java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represen ...

  5. torchvision.transforms模块介绍

    torchvision.transforms模块 官网地址:https://pytorch.org/docs/stable/torchvision/transforms.html# torchvisi ...

  6. 03.父工程pom、整合测试、SpringBootApplication注解

    父工程 idea点击spring-boot-starter-parent找到父工程spring-boot-dependencies模仿配置 父工程 <?xml version="1.0 ...

  7. 微信小程序中的自定义组件 以及 相关的坑

    Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件, ...

  8. Angular JS - 7 - Angular JS 常用指令2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 【CF1256】Codeforces Round #598 (Div. 3) 【思维+贪心+DP】

    https://codeforces.com/contest/1256 A:Payment Without Change[思维] 题意:给你a个价值n的物品和b个价值1的物品,问是否存在取物方案使得价 ...

  10. 用DELPHI中实现RAR文件解压到指定一目录

    一个RAR压缩文件,用DELPHI编的程序打开它并解压到某一目录,怎么实现的?自己搞定了例子:winrar.exe e -y C:\WINDOWS\Desktop\ghost.rar d:\ 但新的问 ...