PHP 带预览功能的多张图片上传 前台后台代码

在PHP中实现带预览功能的多图上传，前台通常需要HTML表单配合JavaScript库（如jQuery、axios等），以及后台处理文件上传和展示预览。以下是简化的前端和后端代码示例：

**前端（HTML+JavaScript）：**

<!-- HTML部分 -->
<form id="uploadForm">
  <input type="file" name="images[]" multiple />
  <button type="submit">上传</button>
  <div id="preview"></div> <!-- 预览区域 -->
</form>

<script>
$(document).ready(function() {
  $('#uploadForm').on('submit', function(e) {
    e.preventDefault(); // 阻止默认提交

    const files = document.querySelector('input[type=file]').files;
    if (files.length > 0) {
      for (let i = 0; i < files.length; i++) {
        const fileReader = new FileReader();
        fileReader.onload = function(e) {
          displayPreview(i, e.target.result);
        };
        fileReader.readAsDataURL(files[i]);
      }
    }
  });

  function displayPreview(index, url) {
    const previewDiv = `<img src="${url}" alt="图片${index + 1}">`;
    $('#preview').append(previewDiv);
  }
});
</script>

**后端（PHP）：**

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $allowedExts = ['jpg', 'jpeg', 'png'];
  $tempFiles = [];
  
  foreach ($_FILES['images']['tmp_name'] as $key => $tmpFile) {
    $fileExt = strtolower(pathinfo($_FILES['images']['name'][$key], PATHINFO_EXTENSION));
    
    if (in_array($fileExt, $allowedExts)) {
      // 保存图片到服务器并返回URL
      $newFileName = uniqid() . '.' . $fileExt;
      move_uploaded_file($tmpFile, 'uploads/' . $newFileName);
      $tempFiles[] = '/uploads/' . $newFileName;
      
      // 您可以在这里添加数据库操作或者其他处理，比如返回json数据
      echo json_encode(['image_url' => $newFileName]);
    } else {
      echo "错误：只允许上传.jpg, .jpeg和.png文件.";
    }
  }
}
?>

这个例子展示了基本的前端图片预览和后端文件接收流程，实际应用中还需要考虑错误处理、文件大小限制和安全性等因素。此外，如果你使用的是Node.js后端，可以用Express等框架替代PHP。