1、导入样式，注意顺序

<!-- bootstrap样式 -->

<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">

<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="/static/bootstrap-fileinput/css/fileinput.css">

<script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="/static/bootstrap-fileinput/js/fileinput.js"></script>

<script type="text/javascript" src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/static/bootstrap-fileinput/js/locales/zh.js"></script>

2、test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>

        测试

    </title>

   <!-- bootstrap样式 -->

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="/static/bootstrap-fileinput/css/fileinput.min.css">

    <script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="/static/bootstrap-fileinput/js/fileinput.min.js"></script>

    <script type="text/javascript" src="/static/bootstrap-fileinput/js/locales/zh.js"></script>

    <script type="text/javascript" src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container-fluid">

        <div class="row">

            <!-- 上传文件 -->

            <div class="col-sm-8 col-md-8">

                <div class="panel panel-default">

                    <input id="f_upload" type="file" class="file-loading" />

                </div>

            </div>

        </div>

    </div>

</body>

</html>

3、效果截图



4、显示中文

  • 除了上面引入“”外，还需要额外添加js代码，如下：
$(function () {

    //0.初始化fileinput

    var oFileInput = new FileInput();

    oFileInput.Init("upload_file", "tools/");

});

//初始化fileinput

var FileInput = function () {

    var oFile = new Object();

    //初始化fileinput控件（第一次初始化）

    oFile.Init = function(ctrlName, uploadUrl) {

        var control = $('#' + ctrlName);

        //初始化上传控件的样式

        control.fileinput({

            language: 'zh', //设置语言

            uploadUrl: uploadUrl, //上传的地址

            allowedFileExtensions: ['xlsx', 'gif', 'png'],//接收的文件后缀

            showUpload: true, //是否显示上传按钮

            showCaption: false,//是否显示标题

            browseClass: "btn btn-primary", //按钮样式

            //dropZoneEnabled: false,//是否显示拖拽区域

            //minImageWidth: 50, //图片的最小宽度

            //minImageHeight: 50,//图片的最小高度

            //maxImageWidth: 1000,//图片的最大宽度

            //maxImageHeight: 1000,//图片的最大高度

            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小

            //minFileCount: 0,

            maxFileCount: 10, //表示允许同时上传的最大文件个数

            enctype: 'multipart/form-data',

            validateInitialCount:true,

            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        });

    };

    return oFile;

};

效果如下：



使用bootstrap创建上传文件的更多相关文章

  1. bootstrap改变上传文件按钮样式，并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  2. bootstrap fileinput 上传文件

    最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput ...

  3. bootstrap fileinput上传文件

    参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974  https://www.cnblogs.com/parker-y ...

  4. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  5. 使用commons-fileUpload组件上传文件

    在近期的一个项目中有用到commons-fileUpload组件进行实现文件上传的功能(由于没用到框架),在使用的过程中有遇到一些问题,经过自己的琢磨也算顺利地将其解决了,在这里做个记录. 一.com ...

  6. 找呀志_通过开源框架引AsyncHttpClient上传文件

    一个.步骤: 1.加入权限(接入网络和可写) 2.获取上传文件的路径和推断是空的 3.如果为空.创建一个异步请求对象 4.创建上传文件路径 5.跑post请求(指定url路径.封装上传參数.新建Asy ...

  7. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  8. Aliyun Oss 上传文件

    目录 Aliyun OSS OSS 简介 OSS 基本概念 OSS 功能概述 OSS 使用 创建存储空间Bucket 创建子目录 Java编码 测试 Aliyun OSS OSS 简介 阿里云对象存储 ...

  9. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

随机推荐

  1. scau 2015寒假训练

    并不是很正规的.每个人自愿参与自愿退出,马哥找题(马哥超nice么么哒). 放假第一周与放假结束前一周 2015-01-26 http://acm.hust.edu.cn/vjudge/contest ...

  2. svn跨多个版本比较

    由于一些原因某个路径下的 svn revision 不是连续的,在比对时需要跨多个版本进行比较,使用下面步骤 Show_log -> 按住 ctrl 键选择不同版本 -> 右键 -> ...

  3. netty中的PoolChunk

    数据结构学的烂,看这个类比较的吃力 PoolChunk主要使用long allocate(int normCapacity) 在buffer pool中分配buffer.这个类有几个重要的概念:pag ...

  4. css笔记-1

    id 优先级大于 class 行间 style  优先级大于id class 和属性是并行的 !important > 行间样式 >id >class|属性 >标签选择器 &g ...

  5. 解决Visiual Studio2012 CLR20r3问题

    解决办法: 步骤1:开始-->所有程序-->Microsoft Visual Studio 2012-->Visual Studio Tools-->VS2012 开发人员命令 ...

  6. HTTP 协议 -- 基础

    概述 HTTP 是基于 TCP/IP 协议的应用层协议,它不涉及数据包(packet)的传输,主要是规定客户端和服务器之间的通信格式,默认使用 80 端口.   HTTP 协议最早版本是 HTTP/0 ...

  7. Sqlserver根据条件去除重复数据并且留下的是最大值数据

    项目中需要根据条件获取一些数据,但是如果条件相同的情况下,要去掉条件一样的并且某个值是最小的数据,留下的是最大值数据. 简单记录一下sql: --去重保留最大值那条 --Year和MCode一样的前提 ...

  8. redis配置文件常用配置介绍

    博客内容首发地址 参数说明 redis.conf 配置项说明如下: Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 当Redis以守护进 ...

  9. 3分钟实现iOS语言本地化/国际化（图文详解）

    前言 语言本地化,又叫做语言国际化. 是指根据用户操作系统的语言设置,自动将应用程序的语言设置为和用户操作系统语言一致的语言. 往往一些应用程序需要提供给多个国家的人群使用,或者一个国家有多种语言,这 ...

  10. poj2409(polya 定理模板)

    题目链接:http://poj.org/problem?id=2409 题意:输入 m, n 表示有 m 种颜色,要构造一个长度为 n 的手环,旋转和对称的只算一种,问能组成多少个不同的手环． 思路: ...