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. ZROI2018提高day6t2

    传送门 分析 将所有字母分别转化为1~26,之后将字符串的空位补全为0,?设为-1,我们设dp[p][c][le][ri]表示考虑le到ri个字符串且从第p位开始考虑,这一位最小填c的方案数,具体转移 ...

  2. Luogu 2737 [USACO4.1]麦香牛块Beef McNuggets

    NOIP2017 D1T1 的结论,两个数$a, b$所不能表示出的最大的数为$a * b - a - b$. 听了好几遍证明我还是不会 注意到本题中给出的数都非常小,所以最大不能表示出的数$\leq ...

  3. Entity Framework Tutorial Basics（12）：Model First

    Model First development with Entity Framework: In the Model First approach, you create Entities, rel ...

  4. eclipse中jad反编译工具的安装

    我的云盘:工具里面有 Q:为什么有必要在开发环境中配置反编译工具呢? A:  当运行引用了第三方jar包项目时,突然报出了jar包中的某个类的某一行出现异常.我们想看一下这个class文件的代码时,经 ...

  5. Android wifi管理类：WifiAdmin

    1.wifi的五种状态: WIFI_STATE_DISABLED   WIFI网卡不可用 WIFI_STATE_DISABLING WIFI网卡正在关闭 WIFI_STATE_ENABLED     ...

  6. [译]内联Javascript vs 外置Javascript

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  7. Microsoft.Baidu.Ali.语音识别/人脸识别

    在第一篇博客里提过图片识别的底层.最精准的图片识别需要海量的数据磨炼.自己写的底层没有以亿为单位的数据支持其实也是个残废品. 此篇不是为了教学.而且在需要的时候抄下来就能用 在此介绍Microsoft ...

  8. 如何打开Assets.car文件

    1.操作步骤 使用GitHub上的工具,下载也好,checkout也好都可以: 运行可知需要传入一个文件路径和解压后的文件输出路径: 选择Edit Scheme 大概看下源码可以知道,第一个是需要解压 ...

  9. timestamp 在curl中变成了Xtamp

    目前的解决方案 将timestemp放在数组最前面. [注意:请求的参数中需要将timestamp这个参数放在数组的最前面,不然在GET方式请求中,会出现浏览器将它变成Xtamp,最终导致签名失败]

  10. oracle数据结构

    数据类型: 1 字符数据:CHAR VARCHAR NCHAR NVARCHAR2 LONG CLOB NCLOB  2 数字数据类型:NUMBER 唯一用来存储数字型的类型 3 日期数据类型: 4 ...