Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

多图片上传可(原创)

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-scalableyes/no定义是否允许用户手动缩放页面,默认值yes

4:多图片上传是常用示例(添加评论图片,上传图片轮播图等);

2
      @其貌不扬0
      2019/3/18 13:51:25
      好像添加一张图片 不想要了 删除了 然后再添加同一张图片 就添加不上了
          Find Yourself0
          2019/8/17 9:44:42
          添加图片删除以后是不能在上传相同图片了
      回复