• 网页开发从无到有——html前端学习（七）

    php在html中的使用

    在web开发中，HTML、JavaScript、css、php可以说是缺一不可，这节我们就来讲讲HTML与php之间的简单应用

    本文提供了一种将图片上传到服务端的功能，其中本机作为服务端

    <html>
<head>
<meta charset="utf-8">
<title>表提交</title>
</head>
<body>

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    <label for="file">文件名：</label>
    <input type="file" name="file" id="file"><br>
    <input type="submit" name="submit" value="提交">
</form>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    php文件如下：

    <?php
// 允许上传的图片后缀
// PHP 的全局数组 $_FILES，你可以从客户计算机向远程服务器上传文件
// 第一个参数是表单的 input name，第二个下标可以是 "name"、"type"、"size"、"tmp_name" 或 "error"
// $_FILES["file"]["name"] - 上传文件的名称
// $_FILES["file"]["type"] - 上传文件的类型
// $_FILES["file"]["size"] - 上传文件的大小，以字节计
// $_FILES["file"]["tmp_name"] - 存储在服务器的文件的临时副本的名称
// $_FILES["file"]["error"] - 由文件上传导致的错误代码
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]); // 此方法类似python的str.split()
// echo "<pre>";
// print_r($temp);
// echo "</pre>";
echo $_FILES["file"]["size"];
$extension = end($temp);     // 获取文件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 204800)   // 小于 200 kb
&& in_array($extension, $allowedExts))
{
    if ($_FILES["file"]["error"] > 0)
    {
        echo "错误：: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
        echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
        echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";

        // 判断当前目录下的 upload 目录是否存在该文件
        // 如果没有 upload 目录，你需要创建它，upload
        if (file_exists("upload/" . $_FILES["file"]["name"]))
        {
            echo "<br><br><br><b>".$_FILES["file"]["name"] . " 文件已经存在。</b> ";
        }
        else
        {
            // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
            if (is_dir("upload"))
            {
                move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
                echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
            }
            else
            {
                echo "<br><br><br><b>upload文件夹不存在</b>";
            }
        }
    }
}
else
{
    echo "非法的文件格式";
}
?>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    结果如下：

    请添加图片描述

    上传之后我们可以看到在我们的文件夹里面多了一张QT的图片，如下图
    在这里插入图片描述

    敲黑板：

    1、因为我们此时用到了php，地址不能再以文件的路径，我们需要在本地架构一个本地服务器（可以使用phpstudy软件快速配置nginx），且地址需要改为localhost或者127.0.0.1

    2、form（表单）中的action指代的是提交之后触发的php回调，其中enctype是指编码方式，这里的multipart/form-data表示不对字符编码，当使用有文件上传控件的表单时，该值是必需的。

    3、method是在表单中的两个http的方法，还有另一个是get。
    get - 从指定的资源请求数据。
    post - 向指定的资源提交要被处理的数据。

    4、php里代码的简要解析：

    ①变量 $_FILES 作为php的超级全局变量，,用来获取通过POST方式上传到服务器的文件数据，因此我们可以通过该变量获取上传的文件（包括图片）
    ②判断文件的类型是否为图片，且不超过200kb
    ③获取文件的信息，并上传到upload文件夹

  • 相关阅读:
    java计算机毕业设计高校科研信息管理系统源码+mysql数据库+系统+lw文档+部署
    react组件通信
    asp.net网上商城系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio协同过滤设计
    2022/09/02 day02：连接远程仓库，推送、克隆
    Java多线程2.2-synchronized 实现原理
    86.Linux系统下复制进程fork(逻辑地址和物理地址)
    Linux QT交叉编译环境安装
    leetcode 108.将有序数组转换为二叉搜索树
    redhawk: create timing window文件
    Vue 设置v-html中元素样式
  • 原文地址：https://blog.csdn.net/weixin_40301728/article/details/125590547