很有意义的html布局

最新推荐文章于 2024-03-14 16:08:22 发布
最新推荐文章于 2024-03-14 16:08:22 发布
阅读量138 收藏
点赞数
分类专栏： 前端开发 文章标签： jquery图片上传 formdata处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37549050/article/details/107639831
版权

包括使用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");

 

大仕忆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
掌握 HTML 定位技巧，轻松打造精美网页布局
a451319296的博客
11-29 957
本文介绍了 HTML 中的定位技术，包括相对定位、绝对定位和固定定位等。通过掌握这些定位技巧，开发人员可以更好地设计和开发具有交互性和美观性的网站。本文重点讲解了定位方式的定义、位置偏移的控制、定位参考对象的改变以及层级关系的控制等方面。最后，本文提出了建议，希望读者能够根据不同的需求和场景选择合适的定位方式，并注意保持代码的简洁和可读性。
漂亮的css布局（导航栏）
07-10
哎哟！不错哦！一个很漂亮的css导航栏，具有很强的学习和借鉴作用，今天拿出来和各位分享希望大家喜欢，谢谢
好看的网站布局
qs1571292935的博客
08-20 5281
. 提供多级侧边栏 相比于传统的顶部多级导航栏，侧边栏会让页面显得更加整齐易用。Carolina Herrera 的侧边栏设计则更有意思，它采用的是多级侧边栏，功能上不弱于前者，提升了浏览体验，而视觉上的效果则更加突出。 22.无需跳转的购物车管理 作为电商网站，编辑管理购物车是重要的功能之一。为了提升整体体验，Everlane 的设计师允许用
HTML经典布局方式
weixin_51445423的博客
09-05 500
HTML布局方式
html经典布局实例
10-16
html经典布局实例 html经典布局实例
详解HTML5布局和HTML5标签
01-18
一、新的文档类型声明(DTD) 文档类型声明 ...结构标签：(块状元素) 有意义的div   标记定义一篇文章   标记定义一个页面或一个区域的头部  <nav> 标记定义导航链接   标记定义一个区域  <aside> 标
html流媒体布局
06-23
2. 媒体属性与事件: HTML5的媒体元素有多个属性用于控制媒体播放，如`autoplay`自动播放，`loop`循环播放，`controls`显示播放控件等。同时，还有许多与媒体播放相关的事件，如`play`, `pause`, `ended`等，可以用于...
HTML表格布局实际使用详解
12-14
什么时候会用到表格 现在，表格一般不再用于网页整体的布局。不过，在面对某些特定的设计，如表单...使用表格很简单，但有时候表格最终为每一个格子呈现的状态，可能不是你想要的。比如说某些格子出现了换行，然后整个
HTML DIV布局
05-11
`<div>`标签本身没有特定的含义，它的意义完全取决于我们如何通过CSS（层叠样式表）来定义其样式和布局。 CSS是控制HTML元素外观和布局的关键。在HTML DIV布局中，我们主要使用CSS来设置宽度、高度、边距、填充等...
lab-task1:htmlcss布局
05-07
在“lab-task1-main”文件中，你可能发现这些基本元素的使用，以及如何组织它们以创建有意义的页面结构。 CSS（Cascading Style Sheets）则负责控制网页的样式和布局。它允许我们将颜色、字体、大小、间距等样式...
学会用HTML-flex布局制作漂亮的网页
ofter数据科学
12-10 1787
OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。
优秀的html布局,优秀的网页设计中常见的六大布局
weixin_42566209的博客
06-30 1013
在优秀网站设计中，不同类型的网站布局方式不一样，但是不管采用何种布局，都要围绕用户的浏览习惯去布局，布局的方式要主次分明，重点突出，比如，用户一般浏览网页都喜欢从左到右的浏览方式。如果网站布局从上下到下，一定能程度上就违反了大部分用户浏览网页的习惯。布局一、大框套小框。这种布局是很多网站都常使用一种布局方式，在一个大的栏目里然后在布局几个小的相关栏目，这种布局方式大小有限，让用户专注于某一方面的内...
有趣的html网页设计,2016年三种有趣的网页设计趋势
weixin_42513209的博客
06-07 158
设计出不同凡响的网站是许多设计师一直追求的事情，所以大家着迷各种时尚的元素，漂亮的配色，流行的趋势，复古的样式，等等。经过时间验证的经典设计、固定的搭配是不错的选择，而逐步展露头角的新趋势，则能更好的满足这一需求。一种全新的设计手法，融合了最新的设计技巧，展现和前人不同的气场，用更现代的气质来承载内容，这样的网站无疑会更加吸引用户，让访客难以忘怀。今天要聊的三种设计趋势其实已经出现一阵子了，但是作...
HTML常用布局标签：提升网页颜值！不可不知的HTML布局技巧全解析！
最新发布
云端源想的博客
03-14 1545
在HTML的世界里，一切都是由容器和内容构成的。容器，就如同一个个盒子，用来装载各种元素；而内容，则是这些盒子里的珍宝。理解了这一点，我们就迈出了探索HTML布局的第一步。
8月16日知识总结
m0_70021245的博客
08-16 271
flex-flow 属性： 复合属性，flex-direction和flex-wrap。- flex-flow 属性： 复合属性，flex-direction和flex-wrap。- align-content属性 子元素整体，在父元素中的对齐方式。- align-content属性 子元素整体，在父元素中的对齐方式。- align-items 侧轴方向，子元素的排列。- align-items 侧轴方向，子元素的排列。...
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
网页设计与制作 | HTML+CSS+JS
01-08 1120
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
HTML的五种经典布局方式（一）
小陈同学の博客
04-16 8267
一、浮动布局（float布局）（流动布局） 使用浮动来完成左中右三栏布局 float:left----左浮动 float:right----右浮动 tip：使用float浮动时，margin:0 auto;使块元素居中将会失效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
常见的几种页面内容布局方式
热门推荐
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
html5 漂亮的左右布局_图文列表 纯css布局
weixin_39628160的博客
11-29 1444
说说图文列表的布局没错，就是这样简单的布局。分了4列，你会想到什么呢？百分比？还是PX我自己还是喜欢用百分比，不知你们是如何使用。接下来说说我的做法！！顶部的排序，就弄个色块吧。默认|价格|销量|人气这里是列表CSS:.container {width: 1200px;margin: auto;}.sort-warp {height: 40px;margin: 40px 0;background:...
HTML商业网站布局：从单列到三列
这份课件提供了一个全面的指导，帮助开发者理解并掌握HTML布局和HTML5新标签的使用，以创建专业且结构清晰的商业网站。通过学习这些基础知识，开发者能够构建出更加适应用户需求和搜索引擎优化的网页结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值