webuploader 图片上传样式美化

不念不忘少年蓝@ 2022-01-17 12:09 602阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][]

工具类: [webuploader ][webuploader]

效果

*上传前:*

![30fc88e106fae6d4e5cd8b1a035a08cf780.jpg][]

*上传后悬浮:*

![5f00193d828f023c2bcce5f320db0fb83b4.jpg][]

html

<div class="ip-group float">
        <label>上传封面:</label>
        <div class="upload-cover" id="fileList" th:attr="data-bucket=${storageRequest.bucket}">
            <div class="fileupload-component">
                <span class="tip">替换图片</span>
                <dl class="upload-button" id="filePicker" >
                    <dd><svg class="icon"><use xlink:href="#icon-Plus"></use></svg></dd>
                    <dd class="text">只支持JPG、PNG</dd>
                    <dd class="text">大小不超过10M</dd>
                </dl>
            </div>
        </div>
    </div>

样式

/* 图片上传 */
    
    dd:after {
        content: '\A';
        white-space: pre;
    }
    
    .upload-cover {
        float: left;
        background-color: rgba(250, 250, 250, 1);
        border: 1px solid rgba(230, 230, 230, 1);
        width: 180px;
        height: 180px;
        position: relative;
    }
    
    .fileupload-component {
        height: 100%;
        width: 100%;
        text-align: center;
        position: relative;
    }
    
    .upload-button {
        color: #c2c2c2;
        height: 59px;
        position: absolute; left: 0; top: 0; right: 0; bottom: 0;
        margin: auto;    /* 有了这个就自动居中了 */
    }
    
    .upload-button .icon {
        font-size: 28px;
    }
    
    .upload-button .text {
        font-size: 11px;
        text-align: center;
    }
    
    /* 上传后按钮隐藏 */
    .file-item+.fileupload-component {
        position: absolute;
        width: inherit;
        z-index: 2000;
        top: 0;
        left: 0;
    }
    
    .file-item+.fileupload-component .upload-button {
        opacity: 0;
    }
    
    /* 悬浮文字提示 */
    .file-item+.fileupload-component:hover{
        background: rgba(0,0,0,0.5);
    }
    
    .fileupload-component .tip {
        text-align: center;
        color: #FFFFFF;
        height: 22px;
        position: absolute; left: 0; top: 0; right: 0; bottom: 0;
        margin: auto;
        display: none;
    }
    
    .file-item+.fileupload-component:hover .tip {
        display: block;
    }
    
    /* 覆盖默认样式 */
    .fileupload-component .webuploader-container {
        position: absolute;
    }
    
    .fileupload-component .webuploader-pick {
         position: relative;
         display: inherit;
         cursor: inherit;
         background: inherit;
         padding: inherit;
         color: inherit;
         text-align: inherit;
         border-radius: inherit;
         overflow: inherit;
    }
    
    .thumbnail.file-item {
        margin-bottom: 0;
        padding: 0;
        border: none;
    }
    
    .thumbnail.file-item img{
        width: 100%;
        height: 100%;
    }

附圆形头像基本样式:

/* start 图片上传 */
    
    dd:after {
        content: '\A';
        white-space: pre;
    }
    
    .head-photo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        float: left;
        background-color: rgba(250, 250, 250, 1);
        border: 1px solid rgba(230, 230, 230, 1);
        position: relative;
    }
    
    .head-photo .thumbnail img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    
    .fileupload-component {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        text-align: center;
        position: relative;
    }
    
    .upload-button {
        height: 59px;
        width: 100%;
        border-radius: 50%;
        color: #c2c2c2;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto; /* 有了这个就自动居中了 */
    }
    
    .upload-button .icon {
        font-size: 28px;
    }
    
    .upload-button .text {
        font-size: 11px;
        text-align: center;
    }
    
    /* 上传后按钮隐藏 */
    .file-item + .fileupload-component {
        position: absolute;
        width: inherit;
        z-index: 2000;
        top: 0;
        left: 0;
    }
    
    .file-item + .fileupload-component .upload-button {
        height: 100%;
        opacity: 0;
    }
    
    /* 悬浮文字提示 */
    .file-item + .fileupload-component:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    
    .fileupload-component .tip {
        text-align: center;
        color: #FFFFFF;
        height: 22px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: none;
    }
    
    .file-item + .fileupload-component:hover .tip {
        display: block;
    }
    
    /* 覆盖默认样式 */
    .fileupload-component .webuploader-container {
        position: absolute;
    }
    
    .fileupload-component .webuploader-pick {
        width: 100%;
        height: 100%;
        position: relative;
        display: inherit;
        cursor: inherit;
        background: inherit;
        padding: inherit;
        color: inherit;
        text-align: inherit;
        border-radius: inherit;
        overflow: inherit;
    }
    
    .thumbnail.file-item {
        margin-bottom: 0;
        padding: 0;
        border: none;
    }
    
    .thumbnail.file-item img {
        width: auto;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
    }
    
    /* 图片上传 end*/

头像 Html

<div class="header-photo-wrap">
        <input class="js_upload_field" type="hidden">
        <div class="head-photo" id="fileList" data-bucket="image-header">
            <div class="file-item thumbnail">
                <img src="/picture" alt="">
            </div>
            <div class="fileupload-component">
                <span class="tip">修改头像</span>
                <dl class="upload-button" id="filePicker" >
                    <dd><svg class="icon"><use xlink:href="#icon-Plus"></use></svg></dd>
                    <dd class="text">请上传您的头像</dd>
                </dl>
            </div>
        </div>
    </div>

转载于:https://my.oschina.net/lemos/blog/2998818

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220117/89b9327680a349079f9cab7f8446bcba.png
[webuploader]: http://fex.baidu.com/webuploader/demo.html
[30fc88e106fae6d4e5cd8b1a035a08cf780.jpg]: /images/20220117/13f144a1b679477297cbcb7a8556cea2.png
[5f00193d828f023c2bcce5f320db0fb83b4.jpg]: /images/20220117/61cbb50c7c6c4fcb987bd0665a2e5c97.png