如何用PHP实现图片上传后自动添加DOM元素至作品集页面

我有一个可替代FTP的网站图片上传后端，希望将其作为图片作品集的后端。具体需求为：图片上传完成后，通过PHP在index.html的.parent容器中添加与现有#img1结构一致的新DOM元素（包含图片预览和灯箱），自动递增id编号（如从#img6变为#img7），并将元素的src和background-image替换为刚上传图片的路径。

upload.php #

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// 检查是否为真实图片
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo " " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// 检查文件是否已存在
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// 检查文件大小
if ($_FILES["fileToUpload"]["size"] > 9000000) {
  echo "Sorry, your file is too large. (10mb limit)";
  $uploadOk = 0;
}

// 允许的文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// 检查是否有错误
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// 上传文件
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

index.html #

<body>

<div class="parent">

  <!-- 图片预览，点击打开灯箱 -->
<a href="#img1" class="">
    <img src="image1.png" class="">
  </a>
  
  <!-- 图片灯箱 -->
  <a href="#" class="lightbox" id="img1">
    <span style="background-image: url('1.png')"></span>
  </a>

</div>

</body>

要实现自动更新index.html的功能，需要修改upload.php，在上传成功后读取并修改index.html的内容，步骤如下：

1. 获取当前index.html中最大的imgX编号，生成新的递增ID
2. 按照现有结构构造包含新图片路径的预览和灯箱DOM元素
3. 将新元素插入到.parent容器末尾，覆盖原文件

修改后的upload.php代码如下：

<?php
$target_dir = "uploads/";
// 用时间戳重命名文件，避免重复冲突
$new_filename = time() . "_" . basename($_FILES["fileToUpload"]["name"]);
$target_file = $target_dir . $new_filename;
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
$img_url = $target_file; // 图片访问路径

// 检查是否为真实图片
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    $uploadOk = 1;
  } else {
    echo "文件不是图片格式。";
    $uploadOk = 0;
  }
}

// 检查文件大小
if ($_FILES["fileToUpload"]["size"] > 9000000) {
  echo "抱歉，文件过大（限制10MB）。";
  $uploadOk = 0;
}

// 允许的文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
  echo "抱歉，仅支持JPG、JPEG、PNG、GIF格式。";
  $uploadOk = 0;
}

// 上传文件并更新index.html
if ($uploadOk == 0) {
  echo "抱歉，文件上传失败。";
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    // 读取index.html内容
    $html_file = "index.html";
    $html_content = file_get_contents($html_file);
    
    // 获取当前最大的img ID
    preg_match_all('/id="img(\d+)"/', $html_content, $matches);
    $max_id = !empty($matches[1]) ? max($matches[1]) : 0;
    $new_id = $max_id + 1;
    
    // 构造新的DOM元素
    $new_element = <<<HTML

  <!-- 图片预览，点击打开灯箱 -->
<a href="#img{$new_id}" class="">
    <img src="{$img_url}" class="">
  </a>

  <!-- 图片灯箱 -->
  <a href="#" class="lightbox" id="img{$new_id}">
    <span style="background-image: url('{$img_url}')"></span>
  </a>
HTML;
    
    // 将新元素插入到.parent容器结束标签前
    $updated_content = preg_replace('/(<\/div>\s*<\/body>)/', $new_element . '$1', $html_content);
    
    // 写入修改后的内容到index.html
    if(file_put_contents($html_file, $updated_content)){
      echo "文件 " . htmlspecialchars($new_filename) . " 上传成功，页面已更新。";
    } else {
      echo "文件上传成功，但更新页面失败，请检查index.html权限。";
    }
  } else {
    echo "抱歉，文件上传过程中出现错误。";
  }
}
?>

上传图片后，index.html的.parent容器会新增如下内容：

<body>

<div class="parent">

  <!-- 图片预览，点击打开灯箱 -->
<a href="#img1" class="">
    <img src="image1.png" class="">
  </a>

  <!-- 图片灯箱 -->
  <a href="#" class="lightbox" id="img1">
    <span style="background-image: url('1.png')"></span>
  </a>

  <!-- 新增的图片预览 -->
<a href="#img2" class="">
    <img src="uploads/1718000000_test.png" class="">
  </a>

  <!-- 新增的图片灯箱 -->
  <a href="#" class="lightbox" id="img2">
    <span style="background-image: url('uploads/1718000000_test.png')"></span>
  </a>

</div>

</body>

内容的提问来源于stack exchange，提问作者Selbjh