小项目 | 图片在线收集系统

最新推荐文章于 2024-06-03 05:23:16 发布

萌狼蓝天

最新推荐文章于 2024-06-03 05:23:16 发布

阅读量1.5k

点赞数 2

分类专栏：【萌狼原创】项目实战

原创文章谢绝转载！不允许搬运！不授权任何人！

本文链接：https://blog.csdn.net/ks2686/article/details/115772488

版权

前端开发 PHP 文件上传图片管理班级目录

关键词由CSDN通过智能技术生成

【萌狼原创】项目实战专栏收录该内容

4 篇文章 1 订阅

订阅专栏

项目背景：

学校要经常收集各种截图，分配到各个班中由班长统一收集，这样收集起来还是很麻烦

项目需求：

前端：做一个图片在线收集系统，学生进入网页，填写姓名，学号，在下拉列表，可以选择班级，然后选择图片文件上传，之后点击提交
后端：获取网页提交的数据（方式：POST），将图片文件放在文件夹（班级为文件夹名字）中，图片文件名为"学号+姓名"
备注：不支持PythonCGI

前端效果图预览

在这里插入图片描述

前端源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <title>图片收集系统-萌狼工作室</title>
    <style>
        body{
            margin: 0;
         padding:0;
            border: 0;
            background: #AEDFFF;
            
        }
        .work{
    margin: auto;
    width:auto;
    border: 1px solid  #66E4CE;
    padding: 10px;
    background: #AEDFFF;
        }
        .bd{
            width:250px;
            margin:0 auto;
            padding: 10px 0px 10px 50px;
/*            background:   #9DC7A3;*/
        } 
    </style>
</head>

<body>

        <script type="text/javascript">
    function bdtj()
    {
    if(document.bd.put.value.length===0)
    {
        alert("用户名未输入！！！！")
        bd.put.focus();
     return;
    }
     document.bd.submit()
    }
</script>
    
    
 <div class="work" >
     <h1 align="center"><font color="#FFFFFF">图片收集系统</font></h1>
     
<form action="upload.php" method="post" enctype="multipart/form-data" name="bd"> 
    <div class="bd">
    <label>姓名： <input type="text" name="studentName"></label><br>
    <label>学号： <input type="text"  name="studentID"></label><br>
    <label>班级：
        <select name="cars">
        <option value="volvo">20计类302班</option>
        </select>
    </label>
    <br>
    <label>图片文件上传：<input type="file" name="pic" accept="image/*"></label>
    <br></div>
    <div align="center"><label><input type="button" name="put" value="提交" onClick="bdtj();"></label></div>
 </form>
</div>
</body>

</html>

后端源码

<?php

//获取表单内容
 $name=$_POST['studentName'];
 $id=$_POST['studentID'];
 $class=$_POST['cars'];
 $file=$_FILES['pic'];  
 //获取文件的后缀,pathinfo()会以数组的形式返回一个文件的路径信息，其中extension元素则是文件的后缀名  
 $ext=pathinfo($_FILES['pic']['name'])['extension']; 
// 给文件重命名
$filename= $id. $name.'.'.$ext;
//设置文件上传到服务器后存放的位置
if (move_uploaded_file($file['tmp_name'], './'.$filename)) {  
    echo "上传成功！";  
 } else{  
    echo "上传失败！";  
 }    
 ?>