zoukankan      html  css  js  c++  java
  • input file类型自定义样式-按钮

      我们在做页面时有时候为了让上传这种类型的输入看起来更加美观,但是由于其自身往往是无法定义样式的,所以我们经常用按钮来 “替代” 它,接下来讲讲其原理和实践过程。原理:为了让input[type='file']看起来更像一个button,我们首先先采用绝对定位定义一个<a>标签,然后采用绝对定位在相同的位置定义一个和<a>大小完全相同的<input type='file'>,并把其透明度设置为0,最后再定义一个div显示上传的文件名即可。为了方便吧css直接写在html里,简要代码如下:

    <!doctype html>
    <html>
        <head>
            <style>
                *
                {
                    margin: 0;
                    padding: 0;
                }
                /*蓝色按钮,绝对定位*/
                .blueButton
                {
                    position: absolute;
                    display: block;
                    width: 100px;
                    height: 40px;
                    background-color: #00b3ee;
                    color: #fff;
                    text-decoration: none;
                    text-align: center;
                    font:normal normal normal 16px/40px 'Microsoft YaHei';
                    cursor: pointer;
                    border-radius: 4px;
                }
                .blueButton:hover
                {
                    text-decoration: none;
                }
                /*自定义上传,位置大小都和a完全一样,而且完全透明*/
                .myFileUpload
                {
                    position: absolute;
                    display: block;
                    width: 100px;
                    height: 40px;
                    opacity: 0;
                }
                /*显示上传文件夹名的Div*/
                .show
                {
                    position: absolute;
                    top:40px;
                    width: 100%;
                    height: 30px;
                    font:normal normal normal 14px/30px 'Microsoft YaHei';
                }
            </style>
            <script src="../jquery-3.1.0.min.js"></script>
            <title>file自定义上传</title>
        </head>
        <body>
            <a href='javascript:void(0);' class="blueButton">选择文件</a>
            <input type="file" class="myFileUpload" />
            <div class="show"></div>
        </body>
    </html>
    <script>
        $(document).ready(function()
        {
            $(".myFileUpload").change(function()
            {
                var arrs=$(this).val().split('\');
                var filename=arrs[arrs.length-1];
                $(".show").html(filename);
            });
        });
    </script>

    这样生成的页面如下:

    点击后页面如下:

    这样就简单地实现了一个美化样式的input[type='file'],重点是这种思维模式很重要,对后面的图片上传也是类似思路。

  • 相关阅读:
    GDB 运行PYTHON 脚本+python 转换GDB调用栈到流程图
    GDB-Dashboard-GDB可视化界面
    使用gdb调试Python进程
    从底层理解Python的执行
    python 用pdb调试
    GDB反向调试 + 指令记录+函数历史记录
    linux 0.11 源码学习+ IO模型
    LINUX系统全部参数 sysctl -a + 网络参数设置
    Linux Kernel 排程機制介紹
    linux 系统调优2
  • 原文地址:https://www.cnblogs.com/martianShu/p/6024009.html
Copyright © 2011-2022 走看看