Table of contents
The development technology uses a simple three-piece set + jquery + back-end PHP to realize simple file collection functions, because the main functions are all implemented in python, and the website is only an auxiliary collection of reports, so there is no need to pay too much attention.
Source code: -system/Web at main abcdefg-png/-system (github.com)
front end
The front-end part uses the traditional three-piece set + jquery + bootstrap, which can display the list of project developers and submission requirements, realize picture preview when uploading pictures, and detect whether the user input is empty or a student number.
First we introduce the core css and js files of jquery and bootstrap
<!-- 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>First, set a simple blank header so the page can be displayed in the middle:
style>
#main-form
{
margin-top: 30px;
}
</style>Then put a layer of div and form under the body:
<form id="form" action="hesuan.php" class="form-horizontal" method="post" enctype="multipart/form-data" onSubmit="return finaljudgeSno();">
...
...
</form>We use textarea to display text content, such as information such as developers, list of creditors and submission requirements. class="form-control"It is a bootstrap exclusive style, and rows = 7the width can be adjusted by using . I also want to explain here that the textarea is really a textarea, and the carriage return and blank lines will be displayed, for comparison.
<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>The interface after selecting the picture is as follows:
Use this js written on the Internet (I really can’t find the original author now, looking for a needle in a haystack) to realize the preview of the picture. I am not a JavaScript expert, and I still like to carry some codes hahaha
Notes have also been added to many settings here, and the number of files allowed to be uploaded at the same time is set to 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>Then use this code to judge whether the user input is a student number.
<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>rear end
The backend uses simple php to realize the function of moving uploaded pictures to a certain directory on the server. An extra function is to name the uploaded picture as a student number, and change the suffix directly to .jpg while reading the file name. At the same time, connect to the database to judge whether the student number belongs to this class, and return a prompt message if it does not belong. The following is the back-end code of 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>";
}
?>Summarize
At this point, we have finally completed the logical closed loop.
Step1: Students submit the screenshot of the nucleic acid test to the webpage (and enter the compliant student number)
Step2: The server uniformly receives the files in a certain folder, performs intelligent identification and matching, and writes the results into the database of the corresponding class.
Step3: Call out the current submission status from the database, and feed back to the visual interface and Excel table (administrators can view\download)
Step4: Python implements regular work and periodically deletes all reports, and the data implements a large cycle of stage updates.
exception handling
-
First of all, we can ensure that the pictures submitted by students are named as student numbers and the format is .jpg. In this way, the python path will not contain the Chinese path, and the pictures read by opencv must also be in jpg format.
-
Whether the image is damaged, the image time recognition fails, or the image result recognition fails, there is a corresponding exception handling, and you can feedback such exceptions as recognition failure and doubtful results.
-
There is no problem with project deployment. You can mount and run python execution scripts for a long time, arrange processes according to requirements, and ensure server load balancing and service stability.