上传成功后显示图片缩略图的实现方案（含PHP验证逻辑）

Hey there! Let's get that thumbnail preview working after your image upload. Here's a step-by-step solution that integrates with your existing ControllerImage and myImagebut setup:

First, let's expand your form with elements for progress tracking and thumbnail display, then add JS to handle the upload, progress, and response:

<div>
  <form id="imageUploadForm" enctype="multipart/form-data">
    <input type='file' name='imageFile' accept="image/*" />
    <button type="submit">上传图片</button>
    <!-- Progress bar container -->
    <div id="uploadProgress" style="display: none; height: 5px; background: #eee; margin: 10px 0;">
      <div id="progressBar" style="height: 100%; width: 0%; background: #4CAF50;"></div>
    </div>
    <!-- Thumbnail container -->
    <div id="thumbnailContainer" style="margin-top: 15px; display: none;">
      <h4>预览缩略图</h4>
      <img id="previewImage" style="max-width: 200px; max-height: 200px;" />
    </div>
  </form>
</div>

<script>
document.getElementById('imageUploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  const xhr = new XMLHttpRequest();
  const progressBar = document.getElementById('progressBar');
  const uploadProgress = document.getElementById('uploadProgress');
  const thumbnailContainer = document.getElementById('thumbnailContainer');
  const previewImage = document.getElementById('previewImage');
  
  // Show progress bar when upload starts
  uploadProgress.style.display = 'block';
  
  // Track upload progress
  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      progressBar.style.width = percentComplete + '%';
    }
  });
  
  // Handle server response
  xhr.addEventListener('load', function() {
    uploadProgress.style.display = 'none';
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.isValid) {
        // Show valid thumbnail
        previewImage.src = response.thumbnailUrl;
        thumbnailContainer.style.display = 'block';
      } else {
        // Invalid image - notify user and hide preview
        alert('上传的图片无效，请重新选择');
        thumbnailContainer.style.display = 'none';
      }
    } else {
      alert('上传失败，请重试');
    }
  });
  
  // Send request to your PHP controller (replace with your actual path)
  xhr.open('POST', '/path/to/ControllerImage/myImagebut');
  xhr.send(formData);
});
</script>

We'll modify your existing method to not only validate the image but also generate a thumbnail, then return a JSON response for the frontend:

<?php
class ControllerImage {
  public function myImagebut() {
    $response = ['isValid' => false, 'thumbnailUrl' => ''];
    
    if (isset($_FILES['imageFile']) && $_FILES['imageFile']['error'] === UPLOAD_ERR_OK) {
      $fileTmpPath = $_FILES['imageFile']['tmp_name'];
      $fileName = $_FILES['imageFile']['name'];
      $fileType = $_FILES['imageFile']['type'];
      
      // Validate it's a real image
      $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
      if (in_array($fileType, $allowedTypes) && getimagesize($fileTmpPath)) {
        // Set up upload directories (create if they don't exist)
        $uploadDir = 'uploads/';
        $thumbnailDir = 'uploads/thumbnails/';
        if (!file_exists($uploadDir)) mkdir($uploadDir, 0755, true);
        if (!file_exists($thumbnailDir)) mkdir($thumbnailDir, 0755, true);
        
        // Generate unique filename to avoid conflicts
        $uniqueFileName = uniqid() . '_' . $fileName;
        $destPath = $uploadDir . $uniqueFileName;
        $thumbnailPath = $thumbnailDir . 'thumb_' . $uniqueFileName;
        
        // Move uploaded file to permanent location
        move_uploaded_file($fileTmpPath, $destPath);
        
        // Create thumbnail
        $this->createThumbnail($destPath, $thumbnailPath, 200, 200);
        
        // Update response with valid status and thumbnail URL
        $response['isValid'] = true;
        $response['thumbnailUrl'] = '/' . $thumbnailPath; // Adjust path to match your server setup
      }
    }
    
    // Return JSON response to frontend
    header('Content-Type: application/json');
    echo json_encode($response);
    exit;
  }
  
  // Helper method to generate thumbnail
  private function createThumbnail($sourcePath, $destPath, $maxWidth, $maxHeight) {
    list($width, $height) = getimagesize($sourcePath);
    $ratio = min($maxWidth/$width, $maxHeight/$height);
    $newWidth = round($width * $ratio);
    $newHeight = round($height * $ratio);
    
    // Create source image based on file type
    $source = null;
    switch (mime_content_type($sourcePath)) {
      case 'image/jpeg':
        $source = imagecreatefromjpeg($sourcePath);
        break;
      case 'image/png':
        $source = imagecreatefrompng($sourcePath);
        imagealphablending($source, true);
        imagesavealpha($source, true);
        break;
      case 'image/gif':
        $source = imagecreatefromgif($sourcePath);
        break;
      default:
        return false;
    }
    
    // Create destination canvas
    $dest = imagecreatetruecolor($newWidth, $newHeight);
    // Preserve transparency for PNGs
    if (mime_content_type($sourcePath) === 'image/png') {
      imagealphablending($dest, false);
      imagesavealpha($dest, true);
      $transparent = imagecolorallocatealpha($dest, 255, 255, 255, 127);
      imagefill($dest, 0, 0, $transparent);
    }
    
    // Resize and copy image
    imagecopyresampled($dest, $source, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
    
    // Save thumbnail to file
    switch (mime_content_type($sourcePath)) {
      case 'image/jpeg':
        imagejpeg($dest, $destPath, 80); // 80 = quality (0-100)
        break;
      case 'image/png':
        imagepng($dest, $destPath);
        break;
      case 'image/gif':
        imagegif($dest, $destPath);
        break;
    }
    
    // Clean up resources
    imagedestroy($source);
    imagedestroy($dest);
    return true;
  }
}
?>

• Directory Permissions: Make sure the uploads/ and uploads/thumbnails/ directories have write permissions (set to 0755 or 0777 depending on your server config).
• Request Path: Replace /path/to/ControllerImage/myImagebut in the JS with your actual PHP controller endpoint.
• Customization: Adjust the thumbnail size (200x200 in the example) or JPEG quality to fit your needs.
• Extra Validation: Add file size checks if needed (use $_FILES['imageFile']['size'] or adjust upload_max_filesize in php.ini).

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