webuploader 图片上传样式美化

为什么80%的码农都做不了架构师？>>>   

工具类: webuploader 

效果

上传前:

上传后悬浮:

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