|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 以上两行是JSP页面的指令：
|
|
|
第一行用于设置该JSP页面的内容类型为text/html（即HTML格式页面），指定字符编码为UTF-8，同时表明该页面使用Java语言来处理页面相关逻辑。
|
|
|
第二行引入了JSTL（JavaServer Pages Standard Tag Library）核心标签库，定义前缀为“c”，后续可通过这个前缀使用JSTL提供的各类标签，比如用于循环遍历、条件判断等操作的标签，方便在JSP页面中处理动态数据 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>个人信息</title>
|
|
|
<!-- 设置当前HTML页面的标题为“个人信息”，该标题会显示在浏览器的标题栏，让用户知晓此页面主要与个人信息相关 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）应用layui框架提供的样式，用于页面布局、组件美化等操作，使页面呈现layui框架定义的外观风格 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，用于添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
|
|
|
<link rel="stylesheet" href="./css/file.css">
|
|
|
<!-- 引入名为file.css的样式表文件（同样通过相对路径），可能专门用于此页面中与文件相关元素的样式设置，比如文件选择、上传等部分的样式 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录获取该文件（假设layui.js与当前页面处于同一级目录），layui脚本为页面提供众多交互功能以及各种组件支持，例如实现菜单交互、页面元素动态展示等功能 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是常用的JavaScript库，能简化页面中对DOM元素的操作、事件处理以及实现各种动画效果等，方便开发人员编写JavaScript代码来实现页面交互逻辑 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），这里的类名通常与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的include指令包含名为filterLogin.jsp的页面内容，通常这个页面用于处理用户登录相关的验证逻辑或者展示登录相关的界面元素，比如登录表单等，以此保证只有登录后的用户可访问后续页面内容 -->
|
|
|
<jsp:include page="/WEB-INF/student/sHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/student目录下的sHeader.jsp页面，一般用于构建页面的头部区域，可能包含网站logo、导航栏等常见的头部元素，起到统一页面头部布局的作用 -->
|
|
|
<jsp:include page="/WEB-INF/student/studentNav.jsp"></jsp:include>
|
|
|
<!-- 再次使用JSP的include指令，包含WEB-INF/student目录下的studentNav.jsp页面，通常用来展示学生端特有的导航菜单内容，便于用户在不同功能模块间进行切换操作 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个div元素，并赋予其两个类名“layui-layout”和“layui-layout-admin”，这一般是layui框架中用于定义页面整体布局结构的特定类名，遵循layui框架的布局规范来划分页面不同区域，比如头部、主体、侧边栏等（具体根据框架设定） -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 在上述布局div内部再创建一个div元素，类名为“layui-body”，在layui框架里，该区域通常用于承载页面的主要内容，例如展示各类业务数据、操作按钮等 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 新建一个div元素，并通过内联样式设置其四周内边距为15px，主要用于对内部元素进行排版，让页面内容看起来更规整，避免显得过于紧凑或松散 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">学生端</a>
|
|
|
<a><cite>修改头像</cite></a>
|
|
|
</span>
|
|
|
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从“学生端”进入到当前的“修改头像”页面，但超链接的href属性为空，可能后续需完善具体跳转地址以实现页面导航功能 -->
|
|
|
<p style="text-align: center;">
|
|
|
<!-- 创建一个段落（p）元素，并通过内联样式设置文本居中对齐，用于包裹下面的元素，使其整体在页面中居中显示 -->
|
|
|
<img id="sphoto" src="${pageContext.request.contextPath}/showPhotoServlet" style="border: solid #009688;padding: 10px;margin: 20px;text-align: center;width: 100px;">
|
|
|
<!-- 创建一个图片（img）元素，设置了id为“sphoto”，方便后续通过JavaScript操作该元素，图片的src属性指向名为“showPhotoServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成，可能用于获取并显示当前用户的头像图片），同时通过内联样式设置图片的边框样式（solid #009688表示实线边框，颜色为特定的绿色）、内边距为10px、外边距为20px、文本对齐方式为居中以及宽度为100px，使其在页面中有合适的显示效果 -->
|
|
|
</p>
|
|
|
<p style="text-align: center;">
|
|
|
<span id="filename"></span>
|
|
|
<span id="filesize"></span>
|
|
|
<!-- 创建一个段落元素，文本居中对齐，内部包含两个空的<span>元素，分别设置了id为“filename”和“filesize”，后续会通过JavaScript代码往这两个元素中填充选择文件的名称和大小信息 -->
|
|
|
</p>
|
|
|
<form name="formf" method="post" enctype="multipart/form-data" style="text-align: center;">
|
|
|
<!-- 创建一个表单（form）元素，设置其名称为“formf”，提交方法为POST，设置enctype属性为“multipart/form-data”，这是用于实现文件上传功能的必要设置，表明表单数据包含文件类型的数据，通过内联样式设置文本居中对齐，此表单用于用户选择要上传的头像文件并进行提交操作 -->
|
|
|
<a href="javascript:;" class="file">选择文件
|
|
|
<input id="selectfiles" accept="image/jpeg,image/gif" type="file" name="myfile">
|
|
|
<!-- 创建一个超链接（a标签），设置href属性为“javascript:;”使其点击时不进行实际的页面跳转，应用了“file”类名（可能对应特定样式），内部包含一个文件选择输入框（input，类型为file），设置了id为“selectfiles”方便后续操作，通过accept属性限制可选择的文件类型为JPEG图像和GIF图像，设置名称为“myfile”，用于在表单提交时传递文件数据 -->
|
|
|
</a>
|
|
|
<a href="javascript:;" class="file" type="submit">开始上传
|
|
|
<input type="submit" id="postfiles" value="upload">
|
|
|
<!-- 创建另一个超链接，同样href属性设置为“javascript:;”，应用“file”类名且设置类型为“submit”（虽然这里在超链接上设置提交类型不太规范，实际起提交作用的是内部的input按钮），内部包含一个提交按钮（input，类型为submit），设置了id为“postfiles”，按钮文本为“upload”，点击这个按钮会触发表单的提交操作，将选择的文件发送到服务器端 -->
|
|
|
</a>
|
|
|
</form>
|
|
|
<p style="text-align: center;">
|
|
|
<span id="msg">${update_msg}</span>
|
|
|
<!-- 创建一个段落元素，文本居中对齐，内部包含一个<span>元素，设置了id为“msg”，通过EL表达式显示名为“update_msg”的变量的值，可能用于在页面上显示一些与头像更新操作相关的提示信息，比如上传成功或失败的消息等 -->
|
|
|
</p>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面，一般用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供了很多页面元素交互相关的功能，例如实现页面布局的动态切换、菜单的展开收起等交互效果，通过调用init方法可激活这些功能，确保页面上基于element模块构建的各种UI组件能正常工作
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
//Demo
|
|
|
layui.use('form', function(){
|
|
|
// 使用layui框架的form模块，后续可以在这个回调函数内部编写与表单相关的交互逻辑代码，不过目前这里没有具体内容，可能是预留的用于进一步开发表单验证、提交等相关功能的地方
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
$('#selectfiles').change(function(e){
|
|
|
// 为id为“selectfiles”的元素（即文件选择输入框）绑定“change”事件，当用户选择了新的文件时，会触发此函数执行相应操作
|
|
|
// console.log($(this).val());//val()获取到的是完整的文件路径值；C:\fakepath\js-dom.png
|
|
|
// 这行代码是用于在控制台打印出选择文件的完整路径值（目前被注释掉了），在实际调试时可查看用户选择的文件路径情况，但由于浏览器的安全限制，通常获取到的路径是类似“C:\fakepath\...”这样的假路径，实际应用中不能依赖这个路径做后续操作
|
|
|
|
|
|
//前端替换图片
|
|
|
var fileObj = document.getElementById("selectfiles").files[0];
|
|
|
// 通过DOM方法获取到用户选择的文件对象（files属性返回一个文件列表，这里取第一个文件，因为一次只能选择一个文件，假设此处只处理单个文件上传情况）
|
|
|
var filepath = window.URL.createObjectURL(fileObj);
|
|
|
// 使用浏览器的URL对象的createObjectURL方法，根据文件对象创建一个临时的URL，用于在页面上展示该文件（比如图片文件可以直接显示）
|
|
|
$('#sphoto').attr('src',filepath);
|
|
|
// 使用jQuery选择器选中id为“sphoto”的图片元素，并通过attr方法将其src属性设置为上面创建的临时URL，实现用户选择文件后在页面上即时预览图片的效果
|
|
|
|
|
|
$('#news').text("");
|
|
|
// 这里试图清空id为“news”的元素的文本内容，但代码中未看到该元素的定义，可能是遗留的多余代码或者后续计划添加的元素相关操作
|
|
|
|
|
|
var fileMsg = e.currentTarget.files;
|
|
|
// 获取当前触发事件的目标元素（即文件选择框）的文件列表，和上面获取文件对象的方式类似，但这里是通过事件对象的currentTarget属性来获取，结果是一样的，都是获取用户选择的文件信息
|
|
|
|
|
|
var fileName = fileMsg[0].name;
|
|
|
// 从文件列表中获取第一个文件（也就是用户选择的文件）的文件名，用于后续显示文件名信息
|
|
|
|
|
|
var fileSize = fileMsg[0].size;
|
|
|
// 获取文件的大小（单位为字节），同样用于后续展示文件大小相关信息
|
|
|
|
|
|
var fileType = fileMsg[0].type;
|
|
|
// 获取文件的类型（例如image/jpeg等），不过在代码中暂时未看到对文件类型做进一步处理，可能仅用于判断是否符合要求（前面在文件选择框设置了可接受的文件类型）
|
|
|
|
|
|
$('#filename').text(fileName);
|
|
|
// 使用jQuery选择器选中id为“filename”的<span>元素，并通过text方法将其文本内容设置为获取到的文件名，实现文件名在页面上的显示
|
|
|
|
|
|
$('#filesize').text('('+getfilesize(fileSize)+')');
|
|
|
// 选中id为“filesize”的<span>元素，将其文本内容设置为调用getfilesize函数处理文件大小后的结果（会根据文件大小转换为合适的单位并显示，如KB、MB等），括号用于让显示格式更清晰
|
|
|
|
|
|
$('#msg').text('');
|
|
|
// 清空id为“msg”的<span>元素的文本内容，可能是为了清除之前显示的提示信息，准备显示新的相关提示
|
|
|
|
|
|
function getfilesize(size) {
|
|
|
if (!size)
|
|
|
return "";
|
|
|
// 如果传入的文件大小参数为0或者未定义（即!size为真），则直接返回空字符串，表示不显示文件大小信息
|
|
|
|
|
|
var num = 1024.00; //byte
|
|
|
// 定义一个常量，表示字节与其他单位换算时的基数，这里以1024字节为1KB进行单位换算
|
|
|
|
|
|
if (size < num)
|
|
|
return size + "B";
|
|
|
// 如果文件大小小于1024字节，直接返回文件大小数值加上单位“B”（表示字节），例如文件大小为500字节，就显示“500B”
|
|
|
|
|
|
if (size < Math.pow(num, 2))
|
|
|
return (size / num).toFixed(2) + "K"; //kb
|
|
|
// 如果文件大小小于1024 * 1024字节（即1MB），将文件大小除以1024并保留两位小数，然后加上单位“K”（表示KB），例如文件大小为2048字节，就显示“2.00K”
|
|
|
|
|
|
if (size < Math.pow(num, 3))
|
|
|
return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
|
|
|
// 如果文件大小小于1024 * 1024 * 1024字节（即1GB），将文件大小除以1024的平方（即换算为MB）并保留两位小数，加上单位“M”（表示MB），例如文件大小为2097152字节，就显示“2.00M”
|
|
|
|
|
|
if (size < Math.pow(num, 4))
|
|
|
return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
|
|
|
// 如果文件大小小于1024 * 1024 * 1024 * 1024字节（即1TB），将文件大小除以1024的立方（即换算为GB）并保留两位小数，加上单位“G”（表示GB）
|
|
|
|
|
|
return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
|
|
|
// 如果文件大小大于等于1TB，将文件大小除以1024的四次方（即换算为TB）并保留两位小数，加上单位“T”（表示TB）
|
|
|
}
|
|
|
|
|
|
});
|
|
|
$('#postfiles').click(function(){
|
|
|
// 为id为“postfiles”的元素（即提交按钮）绑定“click”事件，当点击该按钮时，执行以下操作
|
|
|
var fileInput = $('#selectfiles').get(0).files[0];
|
|
|
// 通过jQuery选择器获取id为“selectfiles”的文件选择框元素，再通过DOM方法获取其第一个文件对象（和前面获取文件对象的方式类似），目的是获取用户选择的文件信息
|
|
|
|
|
|
if (fileInput == null) {
|
|
|
alert("请先选择文件！");
|
|
|
return;
|
|
|
// 如果获取到的文件对象为空（即用户没有选择文件就点击了提交按钮），则弹出一个提示框提醒用户先选择文件，并通过return语句终止后续代码的执行，避免表单提交无效的数据
|
|
|
} else {
|
|
|
document.formf.action="${pageContext.request.contextPath}/uploadImageServlet";
|
|
|
// 如果用户已经选择了文件，就设置名为“formf”的表单的action属性，将表单提交的目标地址设置为名为“uploadImageServlet”的Servlet（通过EL表达式动态获取上下文路径拼接而成），以便将用户选择的文件发送到服务器端进行头像上传处理
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
