工具类: 

效果

上传前:

上传后悬浮:

html

    
    
     上传封面:    
     
        
      
            
       替换图片            
       
                
        
         
          
         
        
                
        
         只支持JPG、PNG
        
                
        
         大小不超过10M
        
            
       
        
      
    
     
    

样式

/* 图片上传 */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

    
    
         
     
        
      
            
               
      
        
      
            
       修改头像            
       
                
        
         
          
         
        
                
        
         请上传您的头像