zoukankan      html  css  js  c++  java
  • bootstrap 好看的上传组件

    <!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>
    

    效果图如下:

  • 相关阅读:
    Linked list
    mysql(1)

    mysql 1130 问题
    POST乱码
    GET乱码(2)
    GET乱码
    P65——练习题2.31
    2.1.9 C语言中的移位运算
    2.1中所想的问题:指针的类型有什么作用?
  • 原文地址:https://www.cnblogs.com/zhenzi0322/p/12073385.html
Copyright © 2011-2022 走看看