上传多图

我就是我 2021-09-18 15:34 372阅读 0赞

<?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>