fastadmin上传图片文件控件faupload faupload-preview样式美化

先看图片,整体把上传和预览文件样式都修改了,支持多文件上传和预览效果
美化前

美化后

上传图片html代码

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Cover')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <div style="display:flex" class="acea-row">
                    <input id="c-cover" class="form-control" size="50" name="row[cover]" type="hidden" value="{$row.cover|htmlentities}">
                    <button style="display:none" type="button" id="faupload-cover" class="btn btn-danger faupload" data-input-id="c-cover" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-cover"><i class="fa fa-upload"></i> {:__('Upload')}</button>
                    <ul class="row list-inline faupload-preview" id="p-cover" style="flex:1;margin-left:0">
                        
                    </ul>
                    <div class="fc-upload-btn fachoose" id="fachoose-cover"  data-input-id="c-cover" data-mimetype="image/*" data-multiple="false"><i class="el-icon-user fa fa-image"></i></div>
                </div>
                
                
            </div>
        </div>
    </div>

/**/
  .acea-row .fc-upload-btn, .fc-files {
            display: inline-block;
            width: 58px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            border: 1px solid #c0ccda;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
            box-shadow: 2px 2px 5px #0000001a;
            margin-right: 4px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        .acea-row .fc-upload-btn {
            border: 1px dashed #c0ccda;
            cursor: pointer;
        }
        .acea-row .fc-upload-btn, .upload-box {
            font-size: 24px;
            font-weight: 500;
        }
        .acea-row .plupload-preview li, .faupload-preview li{
            margin-top: 0!important;
            padding: 5px;
        }
        .acea-row .faupload-preview li {
            width: 58px;
            height: 58px;
            border: 1px dashed rgba(0, 0, 0, .1);
            margin-right: 15px;
            display: inline-block;
            position: relative;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .acea-row .faupload-preview li>.thumbnail{
            width: 100%!important;
            height: 100%!important;
        }
        .acea-row .faupload-preview li img{
            width: 100%;
            height: 100%;
        }
        .acea-row .faupload-preview .thumbnail {
            display: block;
            padding: 0px;
            margin-bottom: 0px;
            line-height: 0;
            background-color: #fff;
            border: initial;
            border-radius: 0px;
            -webkit-transition: border 0.2s ease-in-out;
            -o-transition: border 0.2s ease-in-out;
            transition: border 0.2s ease-in-out;
        }
        .acea-row .faupload-preview .btn-trash{
            background-color: transparent;
            color: #606266;
            position: absolute;
            top: -11px;
            right: -9px;
        }