上传多图 

<?php require_once 'base.php';?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增加产品</title>
<style type="text/css">
<
style>.fa-times {
	font-size: 15px;
}

.panel {
	height: 285px;
	margin-bottom: 0;
	margin-top: 10px;
}

.panel-heading {
	text-align: right;
}
/*加号*/
.icon-add-50 {
	position: relative;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	border: 2px dashed #9a9ba3;
	border-radius: 50%;
}

.icon-add-50:before {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	left: 50%;
	top: 50%;
	margin-left: -15px;
	margin-top: -1px;
	background-color: #aaabb2;
}

.icon-add-50:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 30px;
	left: 50%;
	top: 50%;
	margin-left: -1px;
	margin-top: -15px;
	background-color: #aaabb2;
}

.updatepanel {
	border: 1px solid #ccc;
	text-align: center;
}

.updatepanel .addbox {
	vertical-align: middle;
	height: 285px;
	line-height: 285px;
}

#image {
	overflow: hidden;
}

.panel-body {
	/*padding-top: 0px;
				padding-bottom: 0px;*/
	
}

label {
	width: 100%;
}
</style>
</style>
</head>
<body>
	<div id="page-wrapper">
		<div id="page-inner">
			<div class="row">
				<div class="col-md-12">
					<h2>增加产品</h2>
				</div>
			</div>
			<hr />
			<label for="file">点击此处触发上传</label> <input type="file" id="file"
				style="display: none" />

			<div class="ibox-content">
				<div class="row">
					<div class="col-sm-4">
						<div class="panel panel-info">
							<div class="panel-heading">
								<i class="fa fa-times"></i>
							</div>
							<div class="panel-body" style="text-align: center;">
								<div class="row">
									<div class="col-sm-12 col-md-12" id="image">
										<img class="updateimg img-responsive" src="img/p_big3.jpg"
											style="width: inherit; height: 210px;" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-4" id="updatebox">
						<label for="file">
							<div class="panel updatepanel">
								<div class="addbox">
									<span class="icon-add-50"></span>
								</div>
								<input type="file" id="file" style="display: none" />
							</div>
						</label>
					</div>
				</div>

			</div>


		</div>
	</div>
	<script src="assets/js/jquery-1.10.2.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery.metisMenu.js"></script>
	<script src="assets/js/custom.js"></script>
	<script>
	 //将上传图片显示在页面上
	$(".updatepanel").height($(".panel-info").height());
	document.getElementById('file').onchange = function() {
		add();
		var imgFile = this.files[0];
		var fr = new FileReader();
		fr.onload = function() {
			var imgs = document.getElementsByClassName('updateimg');
			imgs[imgs.length-1].src = fr.result;
			/*document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;*/
		};
		fr.readAsDataURL(imgFile);
	};
	function add(){
		var html = "<div class='col-sm-4'><div class='panel panel-info'><div class='panel-heading'><i class='fa fa-times' xss=removed></i></div><div class='panel-body' style='text-align: center;'><div class='row'><div class='col-sm-12 col-md-12'><img class='updateimg img-responsive' src='img/p_big3.jpg' style='width: inherit;height: 210px;'/></div></div></div></div></div>";
		$("#updatebox").before(html);
	}
	$(".fa-times").click(function(){
		$(this).parent().parent().parent().remove();
	});
	</script>
</body>
</html>
posted @ 2019-03-28 15:37  达达前端  阅读(105)  评论(0)  编辑  收藏  举报