移动端和pc端上传图片并预览和删除
【移动端和pc端上传图片并预览和删除】实现功能如图：
商品详情图片最多添加4张，缩略图最多1张，banner图最多一张。
每添加一张图片，就隐藏一个input框，当达到限定张数时，添加图片按钮消失，input框全部隐藏。
用户添加图片后可以点击小图右上角的 × 删除添加的图片。
这可以用ajax提交form表单，图片url地址已经转换为直接可以用的地址了，直接传到后端就行。
文章图片
image.png
话不多说，代码如下，整个代码拿走，直接就可以用。不需要添加和改变任何的东西：
Title - 锐客网 .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
}
推荐阅读
- 急于表达——往往欲速则不达
- 第三节|第三节 快乐和幸福（12）
- 20170612时间和注意力开销记录
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 对称加密和非对称加密的区别
- 眼光要放高远
- 樱花雨
- 前任
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2020-04-07vue中Axios的封装和API接口的管理