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. Luogu 3479 [POI2009]GAS-Fire Extinguishers

    补上了这一道原题,感觉弱化版的要简单好多. 神贪心: 我们设$cov_{x, i}$表示在$x$的子树中与$x$距离为$i$的还没有被覆盖到的结点个数,设$rem_{x, i}$表示在$x$的子树中与 ...

  2. linux环境安装python

    linux环境下安装python3,一步一步来吧! 安装python3 安装readline-devel依赖 ,用于解决python3安装完成后,退格和方向键乱码问题 yum install read ...

  3. kaggle Partial_Dependence_Plots

    # Partial dependence plots# 改变单变量对最终预测结果的影响# 先fit出一种模型,然后取一行,不断改变某一特征,看它对最终结果的印象.# 但是,只使用一行不具有典型性# 所 ...

  4. Joda Time 使用

    Joda Time 使用 对于系统的一些时间操作很是不方便,为了方便转化,有时候用date,有时候用timestmp,有时候用calendar,忍不住想更改了. 但是任务巨大,先把笔记收藏了,后面有机 ...

  5. 解决批处理命令执行完毕后自动关闭cmd窗口方法

    问题描述: 日常开发工作中,为了节省多余操作导致浪费时间,我们经常会自己建一些批处理脚本文件(xx.bat),文件中包含我们需要执行的命令,有时候我们希望执行完毕后看一下执行的结果,但是窗口执行完毕后 ...

  6. c#链接postgresql

    1.首先需要添加2个dll文件:Mono.Security.dll; Npgsql.dll. 2.配置文件增加 <appSettings> <!--<add key=" ...

  7. C#封装的VSTO Excel操作类

    自己在用的Excel操作类,因为经常在工作中要操作Excel文件,可是使用vba实现起来实在是不方便,而且编写也很困难,拼接一个字符串都看的眼花. 这个时候C#出现了,发现使用C#来操作Excel非常 ...

  8. Java与C++比较

    本文仅从片面的角度比较Java与C++的一些特性,如有错误的地方,请指正. 语言特性上的一些差异: 1.Java没有无符号整数,C++/C#都有. 2.Java中不存在指针.Java的引用是功能弱化的 ...

  9. css实现点点点效果

    @keyframes dotDotDoting{ 0% { width 0px margin-right 15px } 25% { width 0px margin-right 15px } 50% ...

  10. C# 服务器端控件

    服务器端控件和客户端控件的比较? 区别:服务器端控件都会有个runat="Server"属性,这样才能够在后台对其进行设置修改,也就是在cs代码里面能对其修改设置.你做下测试 你放 ...