<!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. Android开发文档

    https://developer.android.com/ 用ke学上网方能打开

  2. malloc，free实验

    #include <stdio.h> #include <stdlib.h> int main() { char a = 0; //int * p = (int * ) mal ...

  3. docker 运行jenkins及vue项目与springboot项目(二.docker运行jenkins为自动打包运行做准备)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

  4. 浅谈scrapy框架安装使用

    Scrapy笔记: 一 安装: pip3 install wheel pip3 install lxml pip3 install pyopenssl pip3 install -i https:// ...

  5. mysql里面如何用sql语句让字符串转换为数字

    sql语句将字符串转换为数字默认去掉单引号中的空格,遇到空格作为字符串截止, SELECT '123 and 1=1' +0 结果为123 MySQL里面如何用sql语句让字符串的‘123’转换为数字 ...

  6. Python-字符串str和json格式的转换

    str转json str转换为json格式,前提一定需要保证这个str的格式和json是一致的,即左边最外层是大括号,右边的最外层是大括号.如果不一致,推荐用正则进行拆分至和json格式一致1. 通过 ...

  7. SpringMVC架构实现原理

    SpringMVC架构实现原理 一.SpringMVC介绍 Spring mvc是一个基于mvc的web框架.其中核心类是DispatcherServlet,它是一个Servlet,顶层是实现的Ser ...

  8. 安卓真机或者模拟器运行安装应用时提示 Failure [INSTALL_FAILED_NO_MATCHING_ABIS: Failed to extract native libraries, res=-113]解决办法

    有时候为了方便调试APP,会在电脑上开启模拟器来调试我们的代码,有时候会出现 Failure [INSTALL_FAILED_NO_MATCHING_ABIS: Failed to extract n ...

  9. 在使用 Eclisp 生成 实体(sql Server) 出现错误 :Unable to locate JAR/zip in file system as specified by the driver definition: sqljdbc.jar.

    错误: 解决方法: 第一步:点击 JAR List 第二步:  点击  Remove  JAR/ZIP 第三步: 再添加一下 sqljdbc.jar

  10. 2019牛客多校第⑨场H Cutting Bamboos(主席树+二分)

    原题:https://ac.nowcoder.com/acm/contest/889/H 题意: 给你一些竹子,q个询问,问你从第l到第r个竹子,如果你要用y次砍完它,并且每次砍下来的长度是相同的,问 ...