.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:多图片上传是常用示例(添加评论图片,上传图片轮播图等);