Html
    Css
    Js


.imgFile {
	width:500px;
	border:1px solid #dbdbdb;
	display:flow-root
}
@supports (display:flow-root) {
	.imgFile {
	display:flow-root;
}
}.imgFile label input {
	display:none
}
.imgFile label span {
	width:100px;
	height:100px;
	display:inline-block;
	border:1px solid #999999;
	margin:16px;
	position:relative
}
.imgFile label span:after {
	width:60%;
	height:1px;
	background:#dbdbdb;
	content:"";
	display:inline-block;
	position:absolute;
	top:50%;
	left:calc(50% - 30%)
}
.imgFile label span:before {
	width:1px;
	height:60%;
	background:#dbdbdb;
	content:"";
	display:inline-block;
	position:absolute;
	left:50%;
	top:calc(50% - 30%)
}
.imgFile .imgDiv {
	width:100px;
	height:100px;
	border:1px solid #999999;
	margin:16px;
	position:relative;
	float:left
}
.imgFile .imgDiv img {
	width:100%;
	height:100%;
}
.imgFile .imgDiv span {
	width:100%;
	height:20%;
	color:white;
	display:none;
	background:rgba(0,0,0,0.38);
	position:absolute;
	top:0;
	left:0;
	right:0
}
.imgFile .imgDiv i {
	font-style:inherit;
	float:right;
	cursor:pointer;
	margin-right:5px;
	line-height:100%;
	font-size:20px
}
.imgFile .imgDiv:hover > span {
	display:block
}

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

jQuery多图上传预览

4
      心语0
      2018/9/21 10:42:28
      蝴蝶‘恋情’0
      2018/9/13 18:00:22
      大兄弟!你这个有bug的啊!你没发现啊!图片添加后,再删除图片,被删除的图片不能再次添加的。
      回复
      黄大雄0
      2018/9/13 9:27:32
      看后台是怎么存储的
      回复
      ,,,,,0
      2018/9/12 17:07:43
      添加完文件后,怎么取到所有文件然后上传到后台?
      回复
  短信接口