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. Java之IO流学习总结

    流:可以理解为数据的流动,就是一个数据流,IO流最终要以对象来体现 流的分类:     按照流的方向:输入流和输出流  (输入流只能进行读操作,输出流只能进行写操作)     按照处理数据的不同:字节 ...

  2. LPNMITEMACTIVATE pNMItemActivate = reinterpret_cast<LPNMITEMACTIVATE>(pNMHDR);

    reinterpret_cast代表强制转化,即把pNMHDR强制转化成LPNMITEMACTIVATE类型的. reinterpret_cast<type-id> (expression ...

  3. Entity Framework Tutorial Basics（39）：Raw SQL Query

    Execute Native SQL Query You can execute native raw SQL query against the database using DBContext. ...

  4. 《Effective Java》第3章 对于所有对象都通用的方法

    第8条:覆盖equals时请遵守通用约定 覆盖equals方法看起来似乎很简单,但是有许多覆盖方式会导致错误,并且后果非常严重.最容易避免这类问题的办法就是不覆盖equals方法,在这种情况下,类的每 ...

  5. 判断某元素是否在Array中

    几年前,Insus.NET有尝试把Array转换为IList接口,然后使用IList.Contains()方法.当时评论时,也引起了一些异议.原博文地址:http://www.cnblogs.com/ ...

  6. Python3 简单的三级列表思路

    Python3 简单的三级列表思路(初学者 比较low) 代码如下: info = { '北京':{ '沙河':['benz','momo'], '朝阳':['北土城','健德门'], '国贸':[' ...

  7. iOS开发：setNeedsLayOut和setNeedsDisplay区别

    1.layoutSubviews方法 1.1 根据苹果官方帮助文档对layoutSubviews方法的解释: 此方法用来重新定义子元素的位置和大小.当子类重写此方法,用来实现UI元素的更精确布局.如果 ...

  8. 求解热传导方程matlab

    这是非稳态一维热传导的方法,也叫古典显格式. 如果是做数学建模,就别用了,这种方法计算量比较大,算的很慢,而且收敛不好. 但是如果实在没办法也能凑合用. 该改的地方我都用???代替了. 给个详细解释h ...

  9. Linux配置国内的Yum源

    因为Linux默认的yum源是国外的源,所以会有卡顿,缓慢的情况.而国内的Yum源相对速度较快,现在也比较成熟,所以给Linux更换国内Yum源是一个很好的选择. 1.  备份(备份之前需要yum i ...

  10. oracle多用户并发及事务处理

    多用户并发访问 事务:作用于某些数据的一个不可分割的操作   锁:写锁.互斥锁(仅能被一个进程使用)      读锁.共享锁(可被多个进程使用)   更新丢失 脏读 不可重复读 幻影读   隔离级别: ...