本文旨在解决如何从 MySQL 数据库中读取多个图片文件名，并在 HTML 表格中正确显示这些图片的问题。我们将探讨如何处理上传的图片数组，将其存储到数据库，并最终在网页上以图像的形式呈现，而非简单的 "Array" 文本。
在 Web 开发中，经常需要将用户上传的图片保存到数据库并在网页上展示。一个常见的错误是直接将图片数组以文本形式存储到数据库，导致在前端显示时出现 "Array" 这样的结果。本文将指导你如何正确地处理图片上传、存储和显示，确保在 HTML 表格中呈现出真实的图片。
图片上传与存储
首先，我们需要处理图片上传的部分。原始代码存在一些问题，例如直接将 $_FILES['image'] 数组存储到数据库是不正确的。正确的做法是将每个图片的文件名单独存储，或者使用某种分隔符将多个文件名连接成一个字符串。
以下是一个改进后的图片上传和存储示例：
立即学习“前端免费学习笔记（深入）”；
代码解释：
- 检查上传文件： 确保 $_FILES['image'] 存在且不为空。
- 循环处理图片： 遍历 $_FILES['image']['name'] 数组，获取每个图片的文件名和临时路径。
- 移动文件： 使用 move_uploaded_file() 函数将图片从临时路径移动到目标目录 img/。
- 存储文件名： 将成功上传的图片文件名存储到 $uploaded_images 数组中。
- 构建字符串： 使用 implode() 函数将 $uploaded_images 数组转换为以逗号分隔的字符串。
- 插入数据库： 将包含图片文件名的字符串插入到 my_images 表的 images 列中。
注意事项：
- 请确保 img/ 目录存在并且具有写入权限。
- 数据库字段 images 的数据类型应为 VARCHAR 或 TEXT，长度要足够存储所有文件名。
- 使用 mysqli_real_escape_string() 函数对插入数据库的数据进行转义，以防止 SQL 注入攻击。
从数据库读取并显示图片
接下来，我们需要从数据库中读取图片文件名，并在 HTML 表格中显示图片。由于我们将多个文件名存储为以逗号分隔的字符串，因此需要使用 explode() 函数将其拆分为数组。
以下是改进后的显示图片代码：
| Image(s) |
|---|
代码解释：
- 查询数据： 从 my_images 表中查询数据。
- 获取文件名字符串： 从数据库记录中获取包含图片文件名的字符串。
- 拆分字符串： 使用 explode(',', $image_string) 函数将字符串拆分为数组。
-
循环显示图片： 遍历图片文件名数组，为每个文件名构建图片 URL，并使用
标签显示图片。
注意事项：
- 确保 img/ 目录包含实际的图片文件。
- trim() 函数用于移除文件名中的空格，避免 URL 错误。
- 可以根据需要调整
标签的 width、height 等属性，以控制图片的大小。
- 添加 alt 属性以提供图片的替代文本，增强可访问性。
总结
本文详细介绍了如何从 MySQL 数据库向 HTML 表格显示多张图片。关键步骤包括：正确处理图片上传，将文件名以特定格式存储到数据库，以及从数据库读取文件名并使用 标签显示图片。通过遵循这些步骤，你可以避免出现 "Array" 文本，并在网页上正确地呈现图片。 此外，请务必注意安全性，例如使用 mysqli_real_escape_string() 函数进行 SQL 注入防护，并验证上传文件的类型和大小。
