.uploadBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width:96px;
    height:102px;
    background:rgba(251,251,251,1);
    border:1px dashed rgba(224,229,237,1);
    border-radius:4px;
}
.uploadFileBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;

}
.uploadBtnText {
    font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:18px;
    color:rgba(64,64,64,1);
    margin-top: 12px;
}
.img_input {
    display: none;
}
.ico-upload-add {
    height: 28px;
    width: 28px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAgVBMVEUAAACVlaqkpLaWlqWenqqXl6KVn6qZnq2YoqyYoK2ZoKuYnquaoKmboKybn62ZoK2anquaoK2Zn6uZoayZnquan6uaoa2ZoKyZoK2aoKuaoKyan6uZoKuaoKyZn6yZn6uaoKyaoKyZn6uZoKyZoKuaoKyaoKyZoKyaoKyaoayaoKyxwOCxAAAAKnRSTlMADA4RFRYYMjQ+Rk9TWXBzdHmFh4ySkpaesb/Ay9bX2Nve5+nu8/X29/tBUNyjAAAAd0lEQVRIx+3SNxbCUBQDUZFzMtlgbDBx9r9ANvDdqOPwptW5naSmWrtPOZLRFnh2DHgBmBiwApgFDBgw4K/DYX5K9gIo0ls+kDZYZXp4sFbtwZtWHlxI/eU62R3gmN7m3bhcwIAB/xYWAFMD7oF3z4Dtw/U8bp6//slW7aG4C5cAAAAASUVORK5CYII=') no-repeat center center;
    background-size: 100% 100%;
}
.preview {
    width: 96px;
    height: 102px;
    overflow: hidden;
    position: relative;
    border-radius:4px;
    background:rgba(251,251,251,1);
    border:1px solid rgba(224,229,237,1);
    cursor: pointer;
    margin-left: 16px;
    text-indent: 0;
}
.preview.success:hover .preview-hover-box {
    display: block;
}
.preview-img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.preview-hover-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
    display: none;
}
.preview-hover {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.preview-hover .span {
    font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:12px;
    color:rgba(255,255,255,1);
    margin-top: 8px;
}
.preview-hover .ico-img-delte {
    height: 24px;
    width: 24px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAt1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8QiqlJAAAAPHRSTlMABAgMDxAYHyAjJCcoKywvMDs8P0BES1NUV19gY2Rna29zd3t/g4eLj5efp6uzt7u/y8/T19vf6+/z9/sLFh+tAAACFklEQVRIx5VW72OaMBB9mmpSq7SdbLDa2VJxReyIKwPFvP//79qHrjMBf8D7BC95yeXuchegjpvHlS635LbUq4cbXICMCzooFvLM9OvUkHsdhb4SQvlhpA1p0usT0/tLQ65DYXMiXJP7Zf/Y/ElOZndN/k6T+aTJBxUL//jWfsEqqJNzw0ycOpvIaOYu9UQmvdPe6CWkowgMn8/7+5nGsmpSMbkUoYTV/5P3c2a9S4JexvzTu0sWAhchCi4/vkaGPlrA534EAEiZoRU0UwBQhrX4vpqPxDOvtZjTKAAx1y4/4HuapmmavnPgjqy5AFAwPFBXUsp7JlJKKWXCeynl1WE0ZAGMubdctGMDO8tRhmM8UlubhhsmsY1dGTrHfsCKkW1mTOWYXW7sv4graPsIlwQhNUo3ajGV2EyBnzHwbdOrCXyW2LpLxlSK8cfKMVVNoLgF2W8vEGR3QWeTSn5pL/BZHnHrGUFIfSRwZwQRV/jhpAZiqiGfgN8Z8GIGNYHmrJZ8iKng9YDhEOh7tUgLwxFQMGibGt9ZNC7QC99SG9Uva/CNi8YVVX/c27D92riinYsARobTNvOnn2WmcyHrXirhtSvGnpUjbcq9k3Pzjg2le8sCworFCe9OC1Zhk/ZyUt82+VtN5t7xxr4n14Hb2IPTjR3AKDWk0VEwlULIafDv6TA64z21aDxO1KUIjWeH589s3Bj+C+cvcbNgtw0nAAAAAElFTkSuQmCC') no-repeat center center;
    background-size: 100% 100%;
}
.preview-hover .ico-img-delte:hover {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAA1VBMVEUAAAD/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VQD/VwP/VwT/XQz/Xw//XxD/YhP/ah//byf/dC//dzP/fz//f0D/hEf/h0v/jVT/lF//lWD/n2//oXP/pHf/qX//qn//r4f/t5P/x6v/zLP/0bv/1L//18P/4dP/6d//6t//7uf/7+f/9O//9/P/+ff//Pv///9afLpCAAAAH3RSTlMACB8gIyQnKCssU1RfYGNkZ2t7f4OXn7vT29/r8/f71GIprwAAAZtJREFUSMeVlntbgjAUxqeIiLdMuYMsy8zsqqVZqSTl+f4fKcCndBwc7PeHzwN73zG3nQshaapt3XRcANcx9WaV5FDu2cBgd8scecXwAeEblRPykpYhj+lrpSx9zYKTWDWsr3vAwaun9R0fuPgdVn8OuTCOup9v8I9WVfOgAN7/Py9ZUAjrb3c1KIi218t+UUNfTgwGFMaI9RL6wGxAEwYztFNSZOil34Z0/JQwpmF6rBsZmPscBkGwotMgYUpX0S9jsglRmBmGFDFkBAppM8/LCZ3Oj7kaLRlBk+jsIud0wzyPJuy4Tkwxg0kcZPi++wR4eQV4n+yQwSEuMmzofD9z/LW0wSUgZgBxg/CSHDGDk7GtXIOZcXBcg07OkOGLvgHc3gMsLkJkaKUuXzLregew3QL8rPFJy6nrnXc1bBRAC/r4fMzlAwogNkQ3N2w0XH+gEBVOAuJpRjiRiadKohZLxuohfTeKpPsGU4AEC4p4yYpWxS+KDVxGVV7ZVbMLe1+osMdnnt06yJxuQ+qi5kTKa2iU1qH9aSlo+BeoMsiX74se/QAAAABJRU5ErkJggg==') no-repeat center center;
    background-size: 100% 100%;
}

.preview-hover .ico-img-index {
    height: 24px;
    width: 24px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAyVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9m7n84AAAAQnRSTlMABAgMGBscHyAjJCcoKywvMDM0Ozw/QEhLU1RXWF9gY2Rna29zd3t/g4eLj5OXn6err7e7v8PHy9Pb3+Pn6+/z9/vyYmZGAAACN0lEQVRIx5VWW3uaQBQcXVsJUWNbxUIarY1RExSNaypgEXb+/4/qAzFhuXg5T3yHmW/3zLktkLfb0VKGERmFcvlwizPWnAXULJg2T8BvPEUmcuJYhhCG5UykIpV3UwGvzxW5ckTWJ5wVmczrZfi2T266RX9Xkn676LdjBlb50VbA2M47x4obURWb2FCNddcf0q1Vq1FzSY1hKz6e1vuRKnOrdkz3XIZcxh+R131uaucItQ39o7pzBgJnTQScp1+mooULzGJiAgA8bnCRSXoAYCjq+f0R3ZcTulQGgBlXOj7mruKIFacAAjo6/t+bqtDMYQC0mAgd33rmtlEulGILI8ocHpip/beKsB+w5CTjifj2DGBwUKMywoRLSC2EX38TzgCYPj13u319+pILQiLMZa225U8AYk3uwwPVQmi5CxHR0I9t7A8mAAwaAHo7vmT+GYxA5hv2e+ILXYRPmcgSAoZcl+MhyOKVAHgclOJhMELIXoGwYKMUD4thTtb3/OxTfNIq1IbMJS61bZjiC4074RK/tdJI7fWQ3sfNMySH+eIDADyxl94/xxCKJhCwMNW+qt17vDrjnkFJA6UyHfVxs5lec1rWogDE4kOflzDfolcPAZiK/Uvw/eOYuXqQXT8q0blsGHcyNXLJuNdqbnzlQrl+ZQFOzKBC3X7AuNgD6PikvCv67yTpd8oXe0KubH2x29WLHYDpKVLJid1vCtHs2+9PB/OEesa08DgxzmWoNfx8/gxbhd//ATWSajzmIirrAAAAAElFTkSuQmCC') no-repeat center center;
    background-size: 100% 100%;
}
.preview-hover .ico-img-index:hover {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABoVBMVEUAAAAAgP8AVaoAqv8AgP8AktsAgN8AgOoAgNsQj98Ph/APlvAOjuMOjvENjOYMi+gLiuoKj+sKieIJku0JjeUQj+cNieUMj+wLjugLi+kPj+kPjukOjuoQjOkQjukQjOYMjekPjOcPj+oPi+cPjuoPjugPjOgPjegPjesPj+gPjekPjukPjekOjukOjeoOjugOjuoPjeoPjugPjeoPjugOjekPjeoPjugPjuoPjegPjugPjuoPjOkOjekPjekOjukQjekPjukPjukQjuoPjeoQjeoPjekPjukPjukPjegQjekQjekQjegQjukQjekPjegPjugPjukPjekPjegPjugPjugPjukPjekPjeoPjukQjukQjekQjukQjekQjukQjukQjugQjukQjukPjegPjekPjegPjukPjekPjekPjukPjukQjukTj+kbk+ommOsqmus1n+xApe1IqO5itfBtuvGAw/OSy/SSy/WTzPSWzfWaz/Wl1Pa02/i/4fnD4vnD4/nL5vrO6Prh8Pzk8vzl8vzo9Pzs9v3z+f73+/77/f7///+f+T/NAAAAa3RSTlMAAgMDBAcIDA4QERESEhQWGBkaHB0gJyktLkRGSFBRUlNUVFZWY2RlZWZnaGlqa29vd3h5en+EhYWGh4eKja+wsbe5v8HBx8fJytDT1NTV19fd5+vs7e3u7u/v8PHy8/T19fb39/n6+/39/qQZw3UAAAH0SURBVBgZjcGJI5NhHAfwr8LSZSodju6UKZ2Sai1SdI9JmpSW5vg6XkP1Irpe235/dTOL532f993ezweaQ6c6ItFYMhmLRu6crEEJgeantOm9EIC3A20D1Ay07Ye73a3DdDXcWgYXR7rpqfswNA2DLGKwAQ6hcRY1fgk2rSypBYrzEyxp4jS2Hf9MHxInUFD+kr68KMeW6/TpBvJqPtGn0SA23adv95BT9Z52qY0FeojvARCiXSotv+jlIoDHtEmlRbLT9PAI2DtJVSotOWuzdDexD41UpdKS92ee7hoRpmpDCrKLdBVGJ1ULPzNSsGKur68uzdGuE69pN70mquzyDFWv0E+H2b9i842qfozRaT4jCsugagxfqFmUHZZBmzG8o25F/rMM2r1BH3XLUmAZdOhDF3U/ZEvGoFMXwtStSV5GTDqFcY66VdlkGaaYdGhEcIqaJcmxDNIUkzZT1UAPNXNZEctgjikmVT0AQtQti2Uwz5SvVIQAVMWpmTENFnz/zR3xKuTcpm/t2FQ9Qp9GDiLvGn26ii27eunLkzIU1A7Rh3gtttUlWVKyDoomltQEmyuTLGryMhzOfmARH89Ac+w5PT07ChcVtxJ0NXqzAu6CHW+pGbpbA2+BlocJKhIPmgMoobK+PRKNJZOxaKS9vhJO/wDu0ARA1Z7jEAAAAABJRU5ErkJggg==') no-repeat center center;
    background-size: 100% 100%;
}

.preview-hover-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.preview.success .preview-loading-box {
    display: none;
}
.preview.fail .preview-loading-text {
    color: #FF5500
}
.preview.fail .preview-loading-progress::-webkit-progress-value {
    background: #FF5500
}
.preview-loading-box {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.preview-loading-box .ico-close-for-upload {
    height: 8px;
    width: 8px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAADq6urp6eno6Ojq6urp6eno6Ojp6ekp/iFMAAAAB3RSTlMAGMfLy8/XibfCNQAAAEFJREFUCNdjCBZgAAJGIwbzRBBDrJhBrAwoxJieCMYQHpAAc0BCYAGQEFgAJAQRQDBgUnDFMO1wA+FWwC11hjoDAFzSEwsiTBKhAAAAAElFTkSuQmCC') no-repeat center center;
    background-size: 100% 100%;
    margin-top: 8px;
    position: relative;
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin-right: 8px;
}
.preview-loading-box .ico-close-for-upload::after {
    position: absolute;
    content: '';
    height: 30px;
    width: 30px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}
.preview-loading-text{
    font-size:12px;
    font-family:PingFang SC;
    font-weight:400;
    line-height:18px;
    color:rgba(255,255,255,1);
    margin-top: 14px;
}
.preview-loading-progress {
    width:53px;
    height:6px;
    border-radius:8px;
    margin-top: 24px;
}
.preview-loading-progress::-webkit-progress-value {
    background: rgba(16,142,233,1);
}
.ico-index-wrapper {
    width:24px;
    height:24px;
    background:rgba(255,255,255,0.6);
    border-radius:4px 0px 4px 0px;
    text-align: center;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.ico-index-wrapper.show {
    display: block;
}
.ico-index-wrapper .ico-index {
    height: 11px;
    width: 11px;
    display: inline-block;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAclBMVEUAAAAAgL8AgOoLiuoJjuwJieQNjOYPjuYOkOwNj+kPjeoOi+gQjecPjuoPjeoPjekQjegQjeoQj+oQjugQjuoPjeoQjekPjukQjekPjukQjugQjuoQjekPjugQjukQjukPjekPjegQjukPjegPjekQjunfCj3LAAAAJXRSTlMABAwYGxwoNDc7V1hgY3eLj4+Pk5Obn6uvu7+/w8vf4+fr8/f7hJZAdQAAAIdJREFUGNN90dsSgjAMBNBwUREVtCJovSDQ/f9f5MEEm5noPp50kp0p0Z9sh9LSEU9TERJLAZ9ZCvSF4gGccIh59xhl0J68v1Y5D5Ib4oRz+vGsVw7H7zdTrO+1HNibSnQxlZypJGUmpXRnxVFxxxuc9kr2al8Fuaa9WTo41F9Om6VD/fr1uTNOqBiTM+51GgAAAABJRU5ErkJggg==') no-repeat center center;
    background-size: 100% 100%;
}
.upload-img-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.upload-list-item {
    width: 96px;
    height: 102px;
    margin-left: 16px;
    box-sizing: border-box;
    border: 1px solid red
}