<!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. 离线安装gcc_rpm(centos下安装gcc的方法之一)

    .解压gcc_rpm.tar.gz (我的CSDN账号下载过) tar -zxvf gcc_rpm.tar.gz .解压完进入文件夹,执行以下命令,挨个执行(如果报依赖错误,就加上"--fo ...

  2. oracle死锁查询

    select sess.sid ||','|| sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked ...

  3. 威胁快报|Bulehero挖矿蠕虫升级，PhpStudy后门漏洞加入武器库

    概述 近日,阿里云安全团队监控到Bulehero挖矿蠕虫进行了版本升级,蠕虫升级后开始利用最新出现的PHPStudy后门漏洞作为新的攻击方式对Windows主机进行攻击,攻击成功后会下载门罗币挖矿程序 ...

  4. Python基础教程（011）--程序开发中的错误及原因

    前言 排查代码开发中的错误 内容 1,编写的程序不能正常执行,或者执行的结果不是我们期望的 2,俗称bug,是程序开发常见的,初学常见的原因有 手误 对已经学习的知识点理解不足 对语音还有需要学习和提 ...

  5. throw throws 区别

    throw是语句抛出一个异常.语法:throw (异常对象);         throw e; throws是方法可能抛出异常的声明.(用在声明方法时,表示该方法可能要抛出异常)语法:[(修饰符)] ...

  6. delphi中SendMessage使用说明

    SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数PostMessage不同,将一个消息寄送到一个线 ...

  7. AcWing 230. 排列计数 水题（组合数+错排）打卡

    题目:https://www.acwing.com/problem/content/232/ #include<bits/stdc++.h> #define ll long long #d ...

  8. VIEW当中自定义属性的使用

    主要有三种方法可以实现自定义属性. 第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 [html] vie ...

  9. 再次安装双linux系统及kali的grub修复！

    打算下学期不带笔记本,平时编程上网本就够了,也就看看一般的算法,于是那上网本装centos7和kali,上网本是APU,但是这两个版本的linux都支持的不错. 先安装centos,由于熟悉了linu ...

  10. 腾讯云ubuntu16.04安装MySql5.7未提示密码设置且无法登陆解决

    一.安装 sudo apt-get update sudo apt install mysql-server 二.修改密码 1.由于安装过程中未提示要设置密码,且使用sudo mysql_secure ...