用图片代替上传文件的按钮

最新推荐文章于 2023-03-22 20:43:52 发布

weixin_34128237

最新推荐文章于 2023-03-22 20:43:52 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1773772/blog/670134

2019独角兽企业重金招聘Python工程师标准>>>

<div class="col-md-4"> 
    <div class="thumbnail text-center cnImgUp"> 
        <p class="cnIcon"> 
            <i class="glyphicon glyphicon-picture"></i>
        </p>
        <p class="cnTxt">添加图片</p>
        <input type="file" multiple="" name="uploadPic[]" class="uploaderfile" id="uploaderfile">
    </div>
</div>

<style type="text/css"> 
    .cnImgUp { position:relative; margin-bottom:15px; background-color:#eaeaea;cursor:pointer }
    .cnImgUp .cnIcon { margin-top:25px;margin-right:0px;}
    .cnImgUp .cnIcon i { font-size:40px;color:#cbcbcb; }
    .cnImgUp .cnTxt { margin-top:15px;margin-bottom:15px;color:#afafaf; }
    .uploaderfile{width:100%;height:125px;position:absolute;left:0;top:0;z-index:3;opacity:0;background:rgba(0,0,0,0) none repeat scroll 0 0;border:0 none;cursor:pointer}
</style>

转载于:https://my.oschina.net/u/1773772/blog/670134