使用PHP和mysqli实现数据库中图片的上传、存储与展示技巧详解

使用PHP和mysqli实现数据库中图片的上传、存储与展示技巧详解

一、准备工作

环境搭建：

• 确保你的服务器环境已经安装了PHP和MySQL。
• 创建一个MySQL数据库和表，用于存储图片信息。

创建数据库表：

CREATE TABLE images (
   id INT AUTO_INCREMENT PRIMARY KEY,
   filename VARCHAR(255) NOT NULL,
   filepath VARCHAR(255) NOT NULL,
   upload_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

二、图片上传功能实现

1. <form action="upload.php" method="post" enctype="multipart/form-data">
      <label for="file">选择图片：</label>
      <input type="file" name="file" id="file">
      <input type="submit" name="submit" value="上传">
   </form>
   

// 创建连接 \(conn = new mysqli(\)servername, \(username, \)password, $dbname);

// 检查连接 if ($conn->connect_error) {

   die("连接失败: " . $conn->connect_error);

}

if (isset($_POST[‘submit’])) {

   $filename = $_FILES['file']['name'];
   $tempname = $_FILES['file']['tmp_name'];
   $folder = "uploads/" . $filename;

   // 将图片移动到指定文件夹
   if (move_uploaded_file($tempname, $folder)) {
       // 插入图片信息到数据库
       $sql = "INSERT INTO images (filename, filepath) VALUES ('$filename', '$folder')";
       if ($conn->query($sql) === TRUE) {
           echo "图片上传成功";
       } else {
           echo "Error: " . $sql . "<br>" . $conn->error;
       }
   } else {
       echo "图片上传失败";
   }

}

$conn->close(); ?>

#### 三、从数据库读取图片并展示

1. **查询数据库**：
   创建一个新的PHP文件`display.php`，用于从数据库中读取图片信息并展示。
   ```php
   <?php
   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "test";

   // 创建连接
   $conn = new mysqli($servername, $username, $password, $dbname);

   // 检查连接
   if ($conn->connect_error) {
       die("连接失败: " . $conn->connect_error);
   }

   $sql = "SELECT filename, filepath FROM images";
   $result = $conn->query($sql);

   if ($result->num_rows > 0) {
       while($row = $result->fetch_assoc()) {
           echo "<img src='" . $row["filepath"] . "' alt='" . $row["filename"] . "' width='200'>";
       }
   } else {
       echo "没有找到图片";
   }

   $conn->close();
   ?>

1. 前端展示： 在HTML页面中引入display.php，以展示图片。

   
   <h1>图片展示</h1>
   <?php include 'display.php'; ?>
   

四、进阶技巧

1. 图片懒加载： 为了提高页面加载速度，可以使用图片懒加载技术。

   
   <img class="lazy" data-src="path/to/image.jpg" alt="图片">
   

使用JavaScript实现懒加载：

   document.addEventListener("DOMContentLoaded", function() {
       var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

       if ("IntersectionObserver" in window) {
           let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
               entries.forEach(function(entry) {
                   if (entry.isIntersecting) {
                       let lazyImage = entry.target;
                       lazyImage.src = lazyImage.dataset.src;
                       lazyImage.classList.remove("lazy");
                       lazyImageObserver.unobserve(lazyImage);
                   }
               });
           });

           lazyImages.forEach(function(lazyImage) {
               lazyImageObserver.observe(lazyImage);
           });
       } else {
           // Fallback for browsers that don't support IntersectionObserver
           lazyImages.forEach(function(lazyImage) {
               lazyImage.src = lazyImage.dataset.src;
               lazyImage.classList.remove("lazy");
           });
       }
   });

1. CDN加速： 将图片存储在CDN上，可以显著提高图片加载速度。
   • 使用第三方CDN服务，如Amazon S3、Cloudflare等。
   • 在上传图片时，将图片同步到CDN服务器。

五、总结