<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<form class="form-inline" action="">

    <div class="container">

        <div class="row">

            <div class="form-group">

                <div class="col-sm-4 control-label">选择文件</div>

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

                    <div class="input-group">

                        <input id='location' class="form-control" onclick="$('#i-file').click();">

                        <label class="input-group-btn">

                            <input type="button" id="i-check" value="浏览文件" class="btn btn-primary"

                                   onclick="$('#i-file').click();">

                        </label>

                    </div>

                </div>

                <input type="file" name="file" id='i-file' accept=".xls, .xlsx"

                       onchange="$('#location').val($('#i-file').val());" style="display: none">

            </div>

        </div>

    </div>

</form>

</body>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</html>

效果图如下：

bootstrap 好看的上传组件的更多相关文章

  1. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  2. Bootstrap文件上传组件

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  3. bootstrap-fileinput文件上传组件和laravel引用(未完)

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  4. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  5. Bootstrap fileinput.js，最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  6. 基于tornado python pandas和bootstrap上传组件的mongodb数据添加工具

    总体思路:基于bootstrap4的前端页面上传组件,把excel文件上传至服务器,并利用python pandas读取里面的数据形成字典列表 通过pymongo 接口把数据插入或追加到mongodb ...

  7. 【Bootstrap】bootstrap-fileinput上传文件插件

    [bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...

  8. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  9. Ajax的原理及Django上传组件

    title: Ajax的原理及Django上传组件 tags: Django --- Ajax的原理及Django上传组件 Ajax的原理 ajax 是异步JavaScript和xml ajax就是向 ...

随机推荐

  1. mongodb增删改查基础语法

    转载:https://blog.csdn.net/u012206617/article/details/91047239 1. use DataBaseName 切换/创建数据库use mydb 2. ...

  2. HumanNet v2：用于疾病研究的人类基因网络 X科研网

    HumanNet v2:用于疾病研究的人类基因网络人类基因网络已被证明在疾病研究的许多方面都很有用,已经开发了许多基于网络的策略来产生关于基因 - 疾病 - 药物关联的假设.预测和组织与特定疾病最相关 ...

  3. Nacos 1.1.4 发布，业界率先支持 Istio MCP 协议

    Nacos是阿里巴巴开源的服务发现与配置管理项目,本次发布的1.1.4版本,主要带来的是与Istio的对接功能,使用的是Istio最新的MCP协议.本文将介绍包括这个功能在内的新版本发布的功能. 升级 ...

  4. Qt 无法连接mysql数据库的问题

    错误信息: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE QMYSQL QMYSQL ...

  5. Codeforces 789e The Great Mixing （bitset dp 数学）

    Sasha and Kolya decided to get drunk with Coke, again. This time they have k types of Coke. i-th typ ...

  6. MD5、SHA1、DES加密和解密，Base64编码解码

    /// <summary> /// EncryptHelper 来自 www.Admin10000.com /// </summary> public class Encryp ...

  7. mapreduce求共同好友

    逻辑分析 以下是qq的好友列表数据,冒号前是一个用户,冒号后是该用户的所有好友(数据中的好友关系是单向的) A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E,F,L E: ...

  8. AcWing 227. 小部件厂 （高斯消元）打卡

    题目:https://www.acwing.com/problem/content/description/229/ 题意:有很多个零件,每个零件的生产时间都在3-9天之间,现在只知道每个工人的生产部 ...

  9. POJ 1151 线段树+扫描线（计算矩形面积并）

    前一篇博客有了讲解就不再叙述了 #include<cstdio> #include<cstring> #include<cmath> #include<ios ...

  10. 2.zabbix自定义模板

    zabbix自定义模板 zbx_base_templates.xml <?xml version="1.0" encoding="UTF-8"?> ...