.imageDiv {
display:inline-block;
width:100px;
height:100px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px
}
.cover {
position:absolute;
z-index:1;
top:0;
left:0;
width:100px;
height:100px;
background-color:rgba(0,0,0,.3);
display:none;
line-height:99px;
text-align:center;
cursor:pointer;
}
.cover .delbtn {
color:red;
font-size:20px;
font-style:normal;
}
.imageDiv:hover .cover {
display:block;
}
.addImages {
display:inline-block;
width:100px;
height:100px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px;
}
.clickUpload {
text-align:center;
display:inline-block;
align-items:center;
justify-content:center;
width:100%;
padding:5px 0;
}
.clickUpload span {
font-size:40px;
}
.fileUpload {
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
opacity:0;
}
1:多图片上传,可用于pc端移动端,例如添加评论图片,上传图片轮播等;
2:pc端鼠标移入出现删除,反之移动端鼠标点击出现删除;
3:注意头部的视口标签,使移动端也可以正常使用;
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no">
属性介绍:
| width | 正整数 或 device-width | 定义视口的宽度,单位为像素 |
| height | 正整数 或 device-height | 定义视口的高度,单位为像素,一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放值 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例,它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义放大最大比例,它必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面,默认值yes |
4:多图片上传是常用示例(添加评论图片,上传图片轮播图等);