• 创建美化的上传文件按钮


    <input type="file">标签自带的上传按钮是无法改变样式,如果不需要显示上传按钮的路径,可以做如下处理:

    1、设置input的font-size大小为想要的大小;

    2、设置input的透明度为0;

    3、为其父元素定义样式;

    4、

    DEMO:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .fileInputContainer{
                height:256px;
                background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png);
                position:relative;
                256px;
            }
            .fileInput{
                height:256px;
                overflow: hidden;
                font-size: 300px;
                position:absolute;
                right:0;
                top:0;
                opacity: 0;
                filter:alpha(opacity=0);
                cursor:pointer;
            }
        </style>
        
    </head>
    <body>
        <div class="fileInputContainer">
            <input class="fileInput" type="file" name="" id="" />
        </div>
    </body>
    </html>

    另外一种方法是:

    1、单独样式和上传文件的input(将input隐藏到页面之外,或者将其opacity设置为0)

    2、单独定义一个容器存放上传的文件的路径

    DEMO:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .fileInput{102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
            .upfile{position:absolute;top:-100px;}
            .upFileBtn{102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
        </style>
        
    </head>
    <body>
        <div class="fileInput left">
            <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
            <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
        </div>
        <span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>
    </body>
    </html>

  • 相关阅读:
    解决:微信小程序富文本识别不了空白p标签的方法
    微信小程序
    fastadmin
    微信小程序
    fastadmin使用笔记
    fastadmin使用笔记
    您有新的订单,请注意查收 提示音
    js获取视频第一帧生成图片
    解决JQ WeUI 的 Picker无法动态传值的问题
    微擎 人人商城小程序获取不到用户信息
  • 原文地址:https://www.cnblogs.com/charling/p/3667083.html
Copyright © 2020-2023  润新知