<!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. 【leetcode】925.Long Pressed Name

    题目如下: Your friend is typing his name into a keyboard.  Sometimes, when typing a character c, the key ...

  2. 阿里云移动研发平台EMAS，是如何连续5年安全护航双11的？

    摘要: 阿里云作为阿里巴巴IT基础设施的基石,每年的双十一都面临前所未有的巨大技术挑战.阿里云的EMAS移动研发平台,连续5年支持双11,不仅保障了手机淘宝.支付宝这些阿里巴巴集团App的使用体验,也 ...

  3. Python--字符编码、文字处理、函数

    了解字符编码的知识储备 我们日常用到的文本编辑器有nodepad++,pycharm,word等等,用他们存取文件的过程大致类似,需要知道打开编辑器就打开了启动了一个进程,是在内存中的,所以在编辑器编 ...

  4. sql的分页

    public static string GetPageSql(string sql, int start, int end)        {            return string.Fo ...

  5. （转）Uncaught TypeError: Cannot set property 'innerHTML' of null

    (转)http://www.cnblogs.com/Ricky-Huang/p/5536253.html 在使用Ueditor的时候,会爆出这样的错误: 浏览器控制台就报错了 Cannot set p ...

  6. uORBMain.cpp学习

    uorb_main int uorb_main(int argc, char *argv[]) { if (argc < 2) { usage();                        ...

  7. OC学习篇之---循环引用问题

    在之前的一片文章中,我们介绍了数组操作对象的时候引用问题以及自动释放池的概念: http://blog.csdn.net/jiangwei0910410003/article/details/4192 ...

  8. Python每日一题 004

    将 0001 题生成的 200 个激活码(或者优惠券)保存到 Redis 非关系型数据库中. 代码 import redis import uuid # 创建实例 r=redis.Redis(&quo ...

  9. vue之slot用法

    slot元素作为组件模板之中的内容分发插槽.这个元素自身将被替换. 有 name 特性的 slot 称为具名 slot. 有 slot 特性的内容将分发到名字相匹配的具名 slot. 一.单个组件 如 ...

  10. 通过findViewById()方法从layout中获取view并进行相应的转换时提示："Cannot cast from View to AutoCompleteTextView"的解决办法！（转+自己错误）

    转:http://blog.csdn.net/zyz511919766/article/details/7453864 代码: package zyz.example.autocompletetext ...