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. R: plot 绘图各种参数，以及 legend。。

    ################################################### 问题:基础绘图plot   18.4.30 plot函数,基础绘图的各个参数? 解决方案: ca ...

  2. boost库thread.hpp编译警告honored已修复

    请浏览:https://svn.boost.org/trac/boost/ticket/7874 #7874: compile warning: thread.hpp:342: warning: ty ...

  3. SQL Server中获取指定时间段内的所有日期

    DECLARE @days INT, @date_start DATETIME = '2016-11-01', @date_end DATETIME = '2016-11-10' SET @days ...

  4. Git解决pull无法操作成功

    https://blog.csdn.net/chenjunfengf/article/details/78301957 场景 在git pull的时候,如果本地代码有改动,而服务器上代码也已经被其他人 ...

  5. （Python OpenGL）【 0】关于VAO和VBO以及OpenGL新特性

    (Python OpenGL)关于新版OpenGL需要了解的: 随着OpenGL状态和固定管线模式的移除,我们不在用任何glEnable函数调用,而且也不会有glVertex.glColor等函数调用 ...

  6. DP【洛谷P3089】 [USACO13NOV]POGO的牛Pogo-Cow

    [洛谷P3089] [USACO13NOV]POGO的牛Pogo-Cow FJ给奶牛贝西的脚安装上了弹簧,使它可以在农场里快速地跳跃,但是它还没有学会如何降低速度. FJ觉得让贝西在一条直线的一维线路 ...

  7. 使用css实现垂直居中

    vartical-align vartical-align可以设置行内元素和表格单元格(table-cell)垂直对方式,所以如果元素是行内元素或者表格的话,可以直接应用这个属性对内容进行对齐设置.如 ...

  8. Cocoapds pod install时报错 ：The sandbox is not sync with the Podfile.lock

    解决方法简单:仅供其他小伙伴参考 删除项目工程本地文件夹中的xxx.workspace和Podfile.lock文件,然后重新pod install即可

  9. pytorch构建优化器

    这是莫凡python学习笔记. 1.构造数据,可以可视化看看数据样子 import torch import torch.utils.data as Data import torch.nn.func ...

  10. node.js 设置 淘宝 镜像

    npm config set registry "https://registry.npm.taobao.org" npm info underscore (如果上面配置正确这个命 ...