|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
|
|
|
<!-- JSP页面指令，设置页面响应的内容类型为HTML，字符编码采用UTF-8，同时指定页面使用的编程语言为Java，这里pageEncoding再次强调页面编码，确保字符能正确处理 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
|
<!-- 定义HTML文档的字符编码为UTF-8，与上面JSP指令中的设置作用类似，确保页面内容能正确显示各种字符 -->
|
|
|
<title>文件传输</title>
|
|
|
<!-- 设置页面的标题为“文件传输” -->
|
|
|
<link rel="stylesheet" href="./css/file.css"/>
|
|
|
<!-- 引入自定义的file.css样式表文件（相对路径），用于为文件传输相关功能定制样式 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，用于页面整体的样式布局等美化 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入另一个自定义的style.css样式表文件，可能包含通用或特定的页面样式规则 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，用于实现layui框架相关的功能 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，方便在页面中进行DOM操作、事件处理等操作 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
<!-- 设置页面的视口属性，让页面宽度自适应设备宽度，初始缩放比例为1，最大缩放比例为1，禁止用户手动缩放，常用于移动端页面适配 -->
|
|
|
</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/admin/aHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面内容，通常用来展示页面头部相关的布局、导航等元素 -->
|
|
|
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/admin目录下的adminNav.jsp页面内容，大概率是用于展示管理员相关的导航栏内容 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个具有layui-layout和layui-layout-admin类名的div，是layui框架用于整体页面布局的常见结构，相关布局样式会作用于此 -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 这是页面主体内容区域的div -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 创建一个带有内边距为15px的div，用于放置具体的内容模块 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a>管理员</a>
|
|
|
<a>系统管理</a>
|
|
|
<a><cite>文件发布</cite></a>
|
|
|
</span>
|
|
|
<!-- 创建一个layui框架的面包屑导航元素，包含三个链接，分别显示“管理员”“系统管理”，最后一个链接包裹cite标签显示“文件发布”，用于展示当前页面在整个系统中的层级位置 -->
|
|
|
<p> </p>
|
|
|
<!-- 插入一个空的段落元素，可能用于增加一点页面间距等布局效果 -->
|
|
|
<div id="center-file" style="padding-left: 41%;">
|
|
|
<!-- 创建一个id为“center-file”的div，并设置左边距为41%，可能用于将内部内容在页面中居中显示等布局用途 -->
|
|
|
<h2>文件上传</h2>
|
|
|
<!-- 显示二级标题“文件上传” -->
|
|
|
<ol>
|
|
|
<li>可上传任意大小任意类型文件 </li>
|
|
|
</ol>
|
|
|
<!-- 创建一个有序列表，里面包含一个列表项，说明文件上传的相关规则，即可以上传任意大小和类型的文件 -->
|
|
|
<br>
|
|
|
<!-- 插入一个换行符，用于页面布局上的间隔 -->
|
|
|
<form enctype="multipart/form-data" method="POST" name="formf">
|
|
|
<!-- 创建一个表单，设置表单的编码类型为“multipart/form-data”，用于支持文件上传，提交方法为POST，表单名称为“formf” -->
|
|
|
<h4>请选择上传文件：</h4>
|
|
|
<!-- 显示四级标题“请选择上传文件：” -->
|
|
|
<div id="ossfile"><span id="filename"></span>
|
|
|
<span id="filesize"></span>
|
|
|
<b>
|
|
|
<span id="percentage"></span>
|
|
|
</b>
|
|
|
<div class="progress"><div class="progress-bar" style="width: 100%;"></div></div></div>
|
|
|
<!-- 创建一个id为“ossfile”的div，内部包含几个用于显示文件相关信息（文件名、文件大小、上传进度等）的span元素，以及一个用于展示进度条外观的div结构，初始进度条宽度设置为100%（可能后续会动态改变） -->
|
|
|
<br/>
|
|
|
<!-- 插入一个换行符 -->
|
|
|
<div id="container">
|
|
|
<!-- 创建一个id为“container”的div，用于放置文件选择和上传相关的操作元素 -->
|
|
|
<a href="javascript:;" class="file">选择文件
|
|
|
<input id="selectfiles" type="file" name="myfile">
|
|
|
</a>
|
|
|
<!-- 创建一个链接元素，点击链接无实际跳转（href为javascript:;），应用“file”类名，里面包含一个文件选择的输入框，id为“selectfiles”，类型为“file”，name属性为“myfile”，用于让用户选择要上传的文件 -->
|
|
|
<a href="javascript:;" class="file" type="submit">开始上传
|
|
|
<input type="submit" id="postfiles" value="upload">
|
|
|
</a>
|
|
|
<!-- 创建另一个链接元素，同样点击无实际跳转，应用“file”类名且设置类型为“submit”（虽然这种写法不太规范，一般表单提交按钮直接用button或input[type="submit"]，这里可能是借助链接样式模拟按钮效果），里面包含一个真正的提交按钮，id为“postfiles”，显示文本为“upload”，用于触发文件上传操作 -->
|
|
|
</div>
|
|
|
<p> </p>
|
|
|
<!-- 插入一个空的段落元素 -->
|
|
|
<span id="news">${news}</span>
|
|
|
<!-- 显示一个id为“news”的span元素，其内容通过EL表达式展示名为“news”的值（可能是从后台传递过来的与文件上传相关的提示信息等） -->
|
|
|
</form>
|
|
|
</div>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面内容，通常用于展示页面底部的相关信息，如版权声明、联系方式等 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(5) dl dd:nth-child(3)").addClass("layui-this");
|
|
|
<!-- 通过jQuery选择器选择id为“nav”的元素下的第5个子元素（li标签）里的dl元素下的第3个dd元素，并给其添加类名为“layui-this”的类，可能是用于设置当前导航项或子项的选中状态等样式相关操作，但前提是页面中存在相应结构的元素 -->
|
|
|
$("#nav li:nth-child(5)").addClass("layui-nav-itemed");
|
|
|
<!-- 通过jQuery选择器选择id为“nav”的元素下的第5个子元素（li标签），并给其添加类名为“layui-nav-itemed”的类，同样可能是用于设置导航项的选中状态等样式相关操作 -->
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
});
|
|
|
<!-- 使用layui框架的use方法加载“element”模块，加载成功后获取“element”对象并调用其“init”方法，对页面中的相关元素进行初始化等操作，确保layui框架相关的导航、布局等功能正常使用 -->
|
|
|
</script>
|
|
|
<script>
|
|
|
$('#selectfiles').change(function(e){
|
|
|
// console.log($(this).val());//val()获取到的是完整的文件路径值；C:\fakepath\js-dom.png
|
|
|
// 当文件选择输入框的值发生改变（即用户选择了文件）时触发此函数，这里注释掉了打印文件完整路径值的代码，因为在浏览器中获取到的路径通常是假路径（出于安全考虑）
|
|
|
$('#news').text("");
|
|
|
// 清空id为“news”的元素内的文本内容，可能是清除之前显示的相关提示信息
|
|
|
var fileMsg = e.currentTarget.files;
|
|
|
// 获取当前触发事件的目标元素（即文件选择输入框）的files属性，得到用户选择的文件列表（虽然一般一次只选一个文件上传，但这里是数组形式）
|
|
|
var fileName = fileMsg[0].name;
|
|
|
// 获取选择的第一个文件（通常就是用户选的那个文件）的文件名
|
|
|
var fileSize = fileMsg[0].size;
|
|
|
// 获取该文件的大小（单位为字节）
|
|
|
var fileType = fileMsg[0].type;
|
|
|
// 获取文件的类型（如image/png等）
|
|
|
$('#filename').text(fileName);
|
|
|
// 将获取到的文件名显示在id为“filename”的元素内
|
|
|
$('#filesize').text('('+getfilesize(fileSize)+')');
|
|
|
// 调用getfilesize函数将文件大小转换为合适的单位（如KB、MB等）并显示在id为“filesize”的元素内，外面加上括号
|
|
|
$('#percentage').text('0%');
|
|
|
// 初始化上传进度显示为0%，显示在id为“percentage”的元素内
|
|
|
$('.progress-bar').css("width","0%");
|
|
|
// 将进度条的宽度设置为0%，通过修改样式来更新进度条的外观
|
|
|
|
|
|
function getfilesize(size) {
|
|
|
if (!size)
|
|
|
return "";
|
|
|
// 如果文件大小为空，直接返回空字符串
|
|
|
var num = 1024.00; //byte
|
|
|
// 定义单位换算的基数，这里以字节为基础，1KB = 1024字节
|
|
|
if (size < num)
|
|
|
return size + "B";
|
|
|
// 如果文件大小小于1024字节，直接以字节为单位显示，后面加上“B”表示字节
|
|
|
if (size < Math.pow(num, 2))
|
|
|
return (size / num).toFixed(2) + "K"; //kb
|
|
|
// 如果文件大小小于1024 * 1024字节（即1MB），将字节数除以1024转换为KB，并保留两位小数，后面加上“K”表示KB
|
|
|
if (size < Math.pow(num, 3))
|
|
|
return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
|
|
|
// 如果文件大小小于1024 * 1024 * 1024字节（即1GB），将字节数除以1024的平方转换为MB，并保留两位小数，后面加上“M”表示MB
|
|
|
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(){
|
|
|
var fileInput = $('#selectfiles').get(0).files[0];
|
|
|
// 获取文件选择输入框的第一个文件（也就是用户选择准备上传的那个文件）
|
|
|
if (fileInput == null) {
|
|
|
alert("请先选择文件！");
|
|
|
// 如果没有选择文件，弹出提示框提醒用户先选择文件
|
|
|
} else {
|
|
|
document.formf.action="${pageContext.request.contextPath}/uploadServlet";
|
|
|
// 如果选择了文件，设置表单（名为“formf”）的提交地址为通过EL表达式动态获取的路径（指向名为“uploadServlet”的后端资源），用于将文件上传到服务器端对应的处理逻辑
|
|
|
}
|
|
|
$('.inp_file').val(null);
|
|
|
// 这里代码可能有误，页面中似乎没有名为“inp_file”的元素，如果有，这行代码是将其值清空，可能是想清空相关的文件输入框之类的，但要确保元素存在且类型合适
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
</html> |
