目录
开发技术使用简单的三件套+jquery+后端PHP实现简单的文件收集功能，因为主要功能都是python实现，网站只是辅助收集报告而已，无需过多关注。
源代码：-system/Web at main · abcdefg-png/-system (github.com)
前端
前端部分使用传统三件套+jquery+bootstrap，可以展示项目开发人员列表和提交要求，上传图片时实现图片预览，并且检测用户输入的是否为空，是否为学号。
首先我们引入jquery和bootstrap的核心css，js文件
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap核心 js 与 css 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- bootstrap 图片上传相关文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/piexif.min.js" type="text/javascript"></script>
</script>首先，设置一个简单的空白抬头，使页面可以在中间显示：
style>
#main-form
{
margin-top: 30px;
}
</style>之后在body下面套一层div和form表单：
<form id="form" action="hesuan.php" class="form-horizontal" method="post" enctype="multipart/form-data" onSubmit="return finaljudgeSno();">
...
...
</form>我们用textarea展示文本内容，例如开发者、鸣谢者名单和提交要求之类的信息。class="form-control" 是bootstrap专有样式，使用rows = 7 可以对宽度进行调整。这里还要说明一下，textarea真的是textarea，回车空行都是会显示的，比较方面。
<div class="form-group">
<label class="col-md-2 control-label small"><span class="text-danger"></span>系统介绍：</label>
<div class="col-md-10 has-success">
<textarea name="introduction" readonly type="text" class="form-control" placeholder="" rows = "7">系统作者：杨浩然，彭兴锴，曾品典，方友清，王晓晖
指导老师：吕皖丽老师，郭星老师，郭佳明（导生），张雨（学长）
特别鸣谢：丛言
</textarea>
</div>
</div>选择图片后的界面是这样的:
使用这段网上写好的js（现在真的找不到原作者了，大海捞针）来实现图片的预览，我本人也不是什么JavaScript高手，有些代码还是喜欢搬运一下哈哈哈
这里很多设置也都加入了注释，允许同时上传文件个数我们设置成1。
<script>
// 图上传与预览相关控制
$('#pic').fileinput
(
{
showUpload : false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
showCaption : true,//是否显示标题,就是那个文本框
showPreview : true, //是否显示预览,不写默认为true
dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
maxFileCount : 1, //表示允许同时上传的最大文件个数
enctype : 'multipart/form-data',
validateInitialCount : true,
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
language : 'zh'
}
)
// 控制生成的代码的样式
$('input.file-caption-name').attr('placeholder', '点击右方按钮选择图片');
$('span.hidden-xs').text("选择图片");
</script>之后再用这段代码，判断一下用户输入的是不是学号。
<script>
var tag = 0;
judgeSno = function() {
var sno = document.getElementById("sno");
var str = "";
str =sno.value
var Regex = /\w/; //英文 + 字母
var str1 = str[0];
var str1Code = str1.charCodeAt();
var hightag = 0;
if(str1Code >= 65 && str1Code <= 90){
hightag = 1; // 判断首字母是否为大写
}
if (str.length == 9 && (sno.value.match(Regex) && hightag == 1 )) {
document.getElementById("checkSno").innerText = "格式正确";
document.getElementById("checkSno").style.color = "green";
tag = 1;
} else {
document.getElementById("checkSno").innerText = "格式不对";
document.getElementById("checkSno").style.color = "red";
tag = 0;
}
return tag;
}
</script>
<script>
finaljudgeSno = function(){
var finaltag = tag;
if(finaltag == 0){
alert("请输入正确的学号！")
return false;
location='https://www.xinanzhijia.xyz/hesuan.html';
}
else{
return true;
}
}
</script>后端
后端使用简单的php，实现将上传图片移动到服务器某目录的功能。多余的一项功能是将上传的图片命名成学号，并且读取文件名的同时将后缀名直接改成.jpg。同时，连接数据库判断这个学号是不是属于这个班级的，如果不属于则返回提示信息，下面是PHP的后端代码：
<?php
header("Content-type: text/html; charset=utf-8");
$userName='';
$passWord='';
$host='localhost';
$dataBase='homework';
$tbname='data1';
$conn=mysqli_connect($host,$userName,$passWord,$dataBase);
if (mysqli_connect_errno($conn))
{
echo "连接 MySQL 失败: " . mysqli_connect_error();
}
$upload_file = $_FILES["file"];
$upload_name = $_POST["name"];
$store_dir = 'hesuan/Xinan/'; // 改！！！！！1
if($upload_file["error"]>0){
// echo "错误：".$file["error"];
if($upload_file["error"]==4){
echo "<script>alert('请选择图片提交');
location='hesuan.html'
</script>";
}
}// 链接改！！！！！！
$sql="select * from {$tbname} where username='$upload_name' ";
$result=mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);
if ($row > 0) {
$arr = ".jpg";
$new_name ="{$upload_name}{$arr}";
$upload_file["name"] = $new_name;
$name = iconv('utf-8','gbk',"hesuan/Xinan/".$upload_file["name"]); // 改！！！！！
if(move_uploaded_file($upload_file['tmp_name'],$name)){
move_uploaded_file($upload_file['tmp_name'],$store_dir.$new_name);
echo "<script>alert('提交成功');
location='hesuan.html';
</script>";
}
else{
echo "<script>alert('提交失败');
location='hesuan.html';
</script>";
}
}
else{
echo "<script>alert('学号在数据库中不存在');
</script>";
}
?>总结
到这里，我们终于完成了逻辑闭环。
Step1：同学们将核酸检测的截图提交到网页（并输入合规的学号）
Step2：服务器将文件统一收到某个文件夹下，进行智能识别匹配，将结果写入对应班级的数据库。
Step3：从数据库调出目前的提交情况，反馈到可视化界面和Excel表格（管理员可查看\下载）
Step4：Python实现定时工作并定期删除全部的报告，数据实现阶段更新的大循环。
异常处理
首先，我们能够保证学生提交的图片：命名为学号，格式为.jpg。这样一来，python的路径中将不含有中文路径，opencv读取的图片也一定是jpg格式。
不论是图片损坏，图片时间识别失败，图片结果识别失败，都有对应的异常处理，可以反馈识别失败和结果存疑这类的异常。
项目部署没有问题，可以长期挂载运行python的执行脚本，根据需求安排进程，保证服务器的负载均衡和服务稳定。