很有意义的html布局

分手后的思念是犯贱 2023-03-02 10:11 90阅读 0赞

包括使用jquery创建最简单的遮罩层，网络请求，图片上传样式修改，选中图片之后回显到界面，显示选中图片的路径。后天处理formData数据

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    
    		<style>
    
    			html {
    				height: 100%;
    			}
    			body{
    				height: auto;
    				min-height: 100%;
    				padding: 0;
    				margin: 0;
    				display: flex;
    				display: -webkit-flex;
    				justify-content: center;
    				align-items: center;
    			}
    
    			.center-box{
    				width: 100%;
    				height: 100%;
    				display: flex;
    				display: -webkit-flex;
    				flex-direction: column;
    				justify-content: center;
    				align-items: center;
    			}
    			.center-select-box{
    				display: flex;
    				display: -webkit-flex;
    				justify-content: center;
    				align-items: center;
    			}
    			.preview-img{
    				width: 600px;
    				height: 400px;
    				border-width: 1px;
    				border-style: solid;
    				border-color: #e6e6e6;
    				border-radius: 2px;
    				display: flex;
    				display: -webkit-flex;
    				justify-content: center;
    				align-items: center;
    				overflow: hidden;
    			}
    			.preview-img-content{
    				height: 100%;
    			}
    			.img-title{
    				position: fixed;
    				padding: 6px;
    				background-color: #E6FAFD;
    				border-width: 1px;
    				border-style: solid;
    				border-color: #e6e6e6;
    				border-radius: 2px;
    				font-size: 12px;
    			}
    			.img-path-info{
    				display: flex;
    				display: -webkit-flex;
    				margin-top: 18px;
    			}
    			.img-path-input{
    				flex:3;
    				padding-left: 6px;
    				height: 35px;
    				border-color: #e6e6e6;
    				border-width: 1px;
    				border-style: solid;
    				background-color: #fff;
    				border-radius: 2px;
    			}
    			
    			.img-select-btn{
    				flex: 1;
    				height: 38px;
    				line-height: 38px;
    				padding: 0 18px;
    				background-color: #4CB050;
    				color: #fff;
    				white-space: nowrap;
    				text-align: center;
    				font-size: 14px;
    				border: none;
    				border-radius: 2px;
    				cursor: pointer;
    			}
    			.img-success-fail{
    				position: absolute;
    				z-index: 999;
    			}
    			
    			
    			 .fileinput-button {
    				position: relative;
    				display: inline-block;
    				overflow: hidden;
    				
    				flex: 1;
    				height: 38px;
    				line-height: 38px;
    				padding: 0 18px;
    				background-color: #4CB050;
    				color: #fff;
    				white-space: nowrap;
    				text-align: center;
    				font-size: 14px;
    				border: none;
    				border-radius: 2px;
    				cursor: pointer;
    			}
    			
    		  .fileinput-button input{
    				opacity:0.1;
    				height: 38px;
    				position: absolute;
    				right: 0px;
    				top: 0px;
    			}
    			
    			.comparison-box{
    				text-align: center;
    				margin-top: 20px;
    			}
    			
    			.comparison-btn{
    				width: 180px;
    				height: 38px;
    				line-height: 38px;
    				padding: 0 18px;
    				background-color: #4CB050;
    				color: #fff;
    				white-space: nowrap;
    				text-align: center;
    				font-size: 16px;
    				border: none;
    				border-radius: 2px;
    				cursor: pointer;
    			}
    			
    			  .mask {     
    			            position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;   
    			            z-index: 1002; left: 0px;   
    			            opacity:0.5; -moz-opacity:0.5;   
    			        } 
    			
    		</style>
    
    		<script src="js/jquery-1.8.2.js"></script>
    	</head>
    	<body>
    		<div class="center-box">
    			<div class="center-select-box">
    				
    				<div class="left-preview-img">
    					<div class="img-title">
    						对一
    					</div>
    					<div>
    						<div class="preview-img">
    							<img class="preview-img-content" src="icon.png" id="cropedBigImgA" />
    						</div>
    						<div class="img-path-info">
    							<input type="text" class="img-path-input" id="chooseImagePathA" />
    							<div>
    								<span class="fileinput-button">
    									<span>上传图片</span>
    									<input type="file" id="chooseImageA" />
    								</span>
    							</div>
    						</div>
    						<div class="preview-filepath"></div>
    					</div>
    				</div>
    				
    				<div class="img-success-fail">
    					<img src="img/face_success.png" id="retImg" />
    				</div>
    				<div style="width: 50px;"></div>
    				
    				<div class="left-preview-img">
    					<div class="img-title">
    						对二
    					</div>
    					<div>
    						<div class="preview-img">
    							<img class="preview-img-content" src="icon.png" id="cropedBigImgB" />
    						</div>
    						<div class="img-path-info">
    							<input type="text" class="img-path-input" id="chooseImagePathB" />
    							<div>
    								<span class="fileinput-button">
    									<span>上传图片</span>
    									<input type="file" id="chooseImageB" />
    								</span>
    							</div>
    						</div>
    						<div class="preview-filepath"></div>
    					</div>
    				</div>
    			</div>
    			<div class="comparison-box">
    				<button class="comparison-btn" onclick="upload()">比对照片</button>
    			</div>
    		</div>
    		<div id="mask" class="mask"></div>
    	</body>
    	<script>
    		var leftOK = false;
    		var rightOk = false;
    		$('#chooseImageA').on('change', function() { //当chooseImage的值改变时，执行此函数
    			//获取到input的value，里面是文件的路径
    			var filePath = $(this).val();
    			
    			//过滤文件
    			fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    			//获取文件对象
    			var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
    			// 检查是否是图片
    			if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
    				leftOk = false;
    				alert('上传错误,文件格式必须为：png/jpg/jpeg');
    				return;
    			} else {
    				$('#chooseImagePathA').val(filePath);
    				leftOk = true;
    				$('#cropedBigImgA').css('display', 'block');
    				$('#cropedBigImgA').attr('src', src);
    			}
    		});
    
    		$('#chooseImageB').on('change', function() { //当chooseImage的值改变时，执行此函数
    			//获取到input的value，里面是文件的路径
    			var filePath = $(this).val();
    			
    			//过滤文件
    			fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    			//获取文件对象
    			var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
    			// 检查是否是图片
    			if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
    				rightOk = false;
    				alert('上传错误,文件格式必须为：png/jpg/jpeg');
    				return;
    			} else {
    				$('#chooseImagePathB').val(filePath);
    				rightOk = true;
    				$('#cropedBigImgB').css('display', 'block');
    				$('#cropedBigImgB').attr('src', src);
    			}
    		});
    
    		function upload() {
    			var fileObjA = $('#chooseImageA')[0].files[0];
    			var fileObjB = $('#chooseImageB')[0].files[0];
    			var formData = new FormData();
    			formData.append("faceA", fileObjA);
    			formData.append("faceB", fileObjB);
    			$.ajax({
    				type: 'post',
    				url: "",
    				data: formData,
    				cache: false,
    				processData: false,
    				contentType: false,
    				beforeSend:function(){
    					showMask();
    				},
    				success: function(data) {
    					hideMask();
    					if(data.success){
    						showRet(true);
    					}else{
    						showRet(false);
    					}
    				},
    				error: function(error) {
    					hideMask();
    					alert("上传失败" + JSON.stringify(error));
    				}
    			});
    		}
    		function showRet(ret){
    			$('#retImg').hidden = false;
    			if(ret){
    				$('#retImg').attr("src",  "img/face_success.png");
    			}else{
    				$('#retImg').attr("src",  "img/face_fail.png");
    			}
    		}
    		function hideRet(){
    			$('#retImg').hidden = true;
    		}
    		 function showMask(){   
    		        $("#mask").css("height",$(document).height());   
    		        $("#mask").css("width",$(document).width());   
    		        $("#mask").show();   
    		    }
    		    //隐藏遮罩层
    		    function hideMask(){   
    		        
    		        $("#mask").hide();   
    		    }
    	</script>
    </html>

后台处理formData

HttpServletRequest request = getActionRequest();
            MultiPartRequestWrapper multiPartRequestWrapper = (MultiPartRequestWrapper) request;
            // MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) ;
            File[] filesA = multiPartRequestWrapper.getFiles("faceA");
            File[] filesB = multiPartRequestWrapper.getFiles("faceB");