实现功能如图:
商品详情图片最多添加4张,缩略图最多1张,banner图最多一张。
每添加一张图片,就隐藏一个input框,当达到限定张数时,添加图片按钮消失,input框全部隐藏。
用户添加图片后可以点击小图右上角的 × 删除添加的图片。
这可以用ajax提交form表单,图片url地址已经转换为直接可以用的地址了,直接传到后端就行。
话不多说,代码如下,整个代码拿走,直接就可以用。不需要添加和改变任何的东西:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>Title</title>
<style>
.photos input[type='file'] {
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.photos img, .photos input[type='file'] {
width: 100px;
height: 100px;
margin-right: 30px;
margin-top: 10px;
transition: all .4s;
}
td{
position: relative;
height: 150px;
left: 20px;
top:20px;
width: 550px
}
.photos div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 30px;
position: relative;
}
.delClose{
height: 20px;
width: 20px;
background-color:red;
border-radius:50%;
position: absolute;
right: 0;
top: 0;
text-align: center
}
</style>
</head>
<body>
<form class="addForm" action="#" method="post" enctype="multipart/form-data" style