<!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. js判断设备(转)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JavaSE---基本数据类型存储大小

  3. CDHkafka脚本

    启动客户端的命令 /opt/cloudera/parcels/KAFKA--/bin/kafka-console-producer --broker-list hadoop102:9092 --top ...

  4. mybatis中递归查询

    业务是这样的,一个商品有不同的规格,所有规格选择完后会出现价格,这些规格我是放在一个表里,父子级关系.mybatis做的时候传过来一个商品Id.然后根据商品id去找所有的规格. <?xml ve ...

  5. SQL注入系列：SQLi Labs

    前言 关于注释 说明:在SQL中--[空格]表示注释,但是在URL中--空格在发送请求的时候会把最后的空格去掉,所以用--+代替,因为+在被URL编码后会变成空格 MYSQL有三种常用注释: --[空 ...

  6. %各位大佬的博客.tql

    线性基:https://www.cnblogs.com/ljh2000-jump/p/5869991.html#4219854 数位DP  https://blog.csdn.net/jk211766 ...

  7. Android 中RelativeLayout各个属性的含义

    转载博客:http://blog.csdn.net/softkexin/article/details/5933589 android:layout_above="@id/xxx" ...

  8. 尚学linux课程---12、vim操作命令2

    尚学linux课程---12.vim操作命令2 一.总结 一句话总结: 要看不同的视频,每个视频的关键点都不一样,不如之间的的视频就没讲到vim中set nu是什么意思 学了的内容一定要练,不然真的是 ...

  9. shell从字符串中提取子串（正则表达式）

    通过试验,可以通过grep.sed两种方式实现. 假设需要提取libgcc-4.8.5-4.h5.x86_64.rpm中的版本号. grep echo "libgcc-4.8.5-4.h5. ...

  10. SSH的两种登录方式

    ssh客户端使用的是Xshell,windows环境. 第一种方式,用户名密码方式 原理如下: 客户端发起ssh请求之后,服务器把自己的公钥传给客户端 客户端输入服务器密码通过公钥加密之后传给服务器 ...