web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 RDS MySQL,高可用系列 2核4GB
简介: web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}

web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}

index.php

(此处需要结合之前的文章验证是否登录:https://developer.aliyun.com/article/1481918?spm=a2c6h.13148508.setting.24.78f94f0eD8R7xx)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<?php
    if(isset($_COOKIE['username'])) {
        echo "帐户信息:<br/>";
        echo "用户名:" . $_COOKIE['username'] . "<br/>";
        echo '<a href="out.php">退出登录</a><br>';
        echo '<a href="floget.html">修改密码</a>';
        echo '<br><a href="upload.php">上传图片</a>';
        echo '<form action="upload.php" method="post" enctype="multipart/form-data">
              <label>文件名:
              <br><input type="text" placeholder="文件名称" name="image_user_name"><br>
              <br><input type="file" name="image_upload"></label><br>
              <br><button type="submit" name="upload">上传图片</button><br>
              </form>';
        echo '<form action="search.php" method=get" name="notice"> <!--action="search.php"-->
              <label>搜索图片:
              <br><input type="text" name="photo" placeholder="请输入图片名"><br>
              <br><button type="submit">搜索</button><br>
              </form>';
        echo '<form action="search.php" method=get" name="notice"> <!--action="search.php"-->
              <label>搜索图片:
              <br><input type="text" name="photo_user" placeholder="你想查询谁上传的图片"><br>
              <br><button type="submit">搜索</button><br>
              </form>';
        } else {
            echo '<h1>您未登录,请<a href="login.html" style="text-decoration:none;">点击登录</h1>';
        }

未登录:

屏幕截图 2024-05-02 084559.png

已登录:

屏幕截图 2024-05-02 084718.png

conn.php

<?php
$root_sevsername="localhost";
$root_username="root";
$root_password="123456";
$root_dbname="users";
// 连接到MySQL数据库
$conn= mysqli_connect($root_sevsername,$root_username,$root_password,$root_dbname);

upload.php

<?php
include "conn.php";//引用conn.php连接数据库
$cookie_name = $_COOKIE['username'];
$image_user_name = $_POST['image_user_name'];
//echo "<script>alert('$image_user_name');</script>";
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}
// 检查上传文件是否存在
if (!isset($_FILES['image_upload'])) {
    echo "<script>alert('未上传文件,请重新上传!');location.href='index.php'</script>";
    exit;
}
// 生成新的随机文件名
$newFileName = uniqid() . ".png";
//echo "<script>alert('$newFileName');</script>";
// 获取上传文件相关信息
$image_name = $_FILES['image_upload']['name'];
$tmp_name = $_FILES['image_upload']['tmp_name'];
$file_type = $_FILES['image_upload']['type'];
$file_extension = strtolower(pathinfo($image_name, PATHINFO_EXTENSION));
$allowedTypes = array('png', 'gif', 'jpg');
$target_dir = "./image_upload/";
// 设置目标文件名(使用新生成的随机文件名)
$target_file = $target_dir . $newFileName;
$target_file1 = explode(".",$target_file);
// 检查文件类型和移动文件
if (in_array($file_extension, $allowedTypes)) {
    // 移动文件并更改文件扩展名为PNG(这里假设所有上传的图片都将被转换为PNG格式)
    if (move_uploaded_file($tmp_name, $target_file)) {
        // 若移动成功,记录数据库的新文件名与地址
        $address = $target_file;
        $address1 =$target_file1[1].'.'.$target_file1[2] ;
        // 预处理SQL语句并执行
        $stmt = mysqli_prepare($conn, "INSERT INTO `image_upload` (`image_user_name`,`image_name`, `image_address`, `image_user`) VALUES (?, ?, ?, ?)");
        mysqli_stmt_bind_param($stmt, "ssss",$image_user_name, $newFileName, $address1, $cookie_name); // 这里记录的是新文件名
        mysqli_stmt_execute($stmt);
        if (mysqli_stmt_errno($stmt)===0) {
            echo "<script>alert('上传成功!,文件位置: {$address},即将返回首页: ');window.location.href='index.php'</script>";
        } else {
            echo "<script>alert('上传失败!');location.href='index.php'</script>";
        }
    } else {
        echo "<script>alert('文件移动失败,请重试!');location.href='index.php'</script>";
    }
} else {
    echo "<script>alert('上传文件类型错误,请重新上传!');location.href='index.php'</script>";
}

图片上传:

屏幕截图 2024-05-02 090815.png

search.php

<?php
include "conn.php";//引用conn.php连接数据库
// 检查连接是否成功
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$photo_name = $_GET['photo'] ?? null;
$photo_user = $_GET['photo_user'] ?? null;
// 准备SQL查询
if ($photo_name != null) {
    $search_sql = mysqli_prepare($conn, "SELECT `image_address` FROM `image_upload` WHERE `image_user_name`=?");
// 绑定参数
    mysqli_stmt_bind_param($search_sql, "s", $photo_name);
// 执行预处理语句
    $search_sql_executed = mysqli_stmt_execute($search_sql);
// 获取结果集(必须先执行才能获取结果)
    $search_result = mysqli_stmt_get_result($search_sql);
// 检查是否有匹配结果
    // 更改mysqli_fetch_array为mysqli_fetch_assoc以获取关联数组
    if ($search_result) {
        echo '<tr>';
        while ($row = mysqli_fetch_assoc($search_result)) { // 更改mysqli_fetch_array为mysqli_fetch_assoc并使用while循环遍历所有结果
            $url = "http://127.0.0.1" . $row['image_address'];
            // 直接在页面上输出图片
            echo '<td style="display: inline-block"><a href="' . $url . '" style=""><img src="' . $url . '" style="width: 400px;margin: 1px" ></a></td>'; // 使用<li>标签包裹每个图片,以形成有序或无序列表
        }
        echo '</tr>'; // 结束 ul 标签,假定你在循环外有一个开始的<ul>标签
    } elseif (!$search_sql_executed) {
        echo "<script>alert('搜索失败!');location.href='index.php'</script>";
    } else {
        echo "SQL执行错误:" . mysqli_error($conn);
    }
// 关闭预处理语句和数据库连接
    mysqli_stmt_close($search_sql);
    mysqli_close($conn);

}
//--------------------------------------------------------------------------
if($photo_user != null) {
    $search_sql = mysqli_prepare($conn, "SELECT `image_address` FROM `image_upload` WHERE `image_user`=?");
// 绑定参数
    mysqli_stmt_bind_param($search_sql, "s", $photo_user);
// 执行预处理语句
    $search_sql_executed = mysqli_stmt_execute($search_sql);
// 获取结果集(必须先执行才能获取结果)
    $search_result = mysqli_stmt_get_result($search_sql);
// 检查是否有匹配结果
    // 更改mysqli_fetch_array为mysqli_fetch_assoc以获取关联数组
    if ($search_result) {
        echo '<tr>';
        while ($row = mysqli_fetch_assoc($search_result)) { // 更改mysqli_fetch_array为mysqli_fetch_assoc并使用while循环遍历所有结果
            $url = "http://127.0.0.1" . $row['image_address'];
            // 直接在页面上输出图片
            echo '<td style="display: inline-block"><a href="' . $url . '" style=""><img src="' . $url . '" style="width: 400px;margin: 1px" ></a></td>'; // 使用<li>标签包裹每个图片,以形成有序或无序列表
        }
        echo '</tr>'; // 结束 ul 标签,假定你在循环外有一个开始的<ul>标签
    } elseif (!$search_sql_executed) {
        echo "<script>alert('搜索失败!');location.href='index.php'</script>";
    } else {
        echo "SQL执行错误:" . mysqli_error($conn);
    }
// 关闭预处理语句和数据库连接
    mysqli_stmt_close($search_sql);
    mysqli_close($conn);
}

搜索图片名(即使多个图片共用同一名)

屏幕截图 2024-05-02 090109.png

搜索谁上传了什么图片

屏幕截图 2024-05-02 090436.png

out.php

<?php
setcookie("username",time()-3600);
header('Refresh:3; url="login.html"');
echo "<h2>三秒后返回登入页面</h2>";

屏幕截图 2024-05-02 091124.png

MySQL结构样式(我用的phpMyAdmin图形化管理):

屏幕截图 2024-05-02 091519.png

屏幕截图 2024-05-02 091527.png

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
180 45
|
20天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
27天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
30 7
|
27天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
35 6
|
27天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
33 5
|
1月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
38 2
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
53 1
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
1月前
|
前端开发 关系型数据库 MySQL
PHP与MySQL动态网站开发实战指南####
【10月更文挑战第21天】 本文将深入浅出地探讨如何使用PHP与MySQL构建一个动态网站,从环境搭建到项目部署,全程实战演示。无论你是编程新手还是希望巩固Web开发技能的老手,都能在这篇文章中找到实用的技巧和启发。我们将一起探索如何通过PHP处理用户请求,利用MySQL存储数据,并最终呈现动态内容给用户,打造属于自己的在线平台。 ####
42 0