页面结构:
函数方法:
图片上传:
图片预览:
删除图片:
转换为base64图片:
css样式:
.upload-imgs {
overflow: hidden;
font-size: 0;
padding: 0;
margin-left: 4px;
li {
position: relative;
width: 86px;
height: 86px;
font-size: 14px;
display: inline-block;
margin-right: 25px;
margin-bottom: 10px;
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
p {
font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(158,164,169,1);
margin-top: 36px;
}
.upload{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 86px;
height: 86px;
z-index: 2;
opacity: 0;
padding: 0;
cursor: pointer;
}
}
li:hover {
.img {
.close {
display: block;
position: absolute;
right: 2px;
top: -10px;
line-height: 1;
font-size: 18px;
color: #aaa;
}
}
}
.img{
position: relative;
width: 86px;
height: 86px;
line-height: 60px;
margin: 8px 0;
vertical-align: middle;
img{
width: 72px;
height: 72px;
vertical-align: middle;
}
.close{
display: none;
&:hover{
cursor: pointer;
}
}
}
input#file-upload-button {
margin: 0 !important;
padding: 0 !important;
}
}