PHP实现编辑页面空文件上传拦截：避免无新图时旧图变裂图

I’ve run into this exact scenario before—nothing’s more frustrating than a broken image showing up because an empty file overwrote the existing one. Let’s break down the fixes from both front-end and back-end to stop this from happening.

Front-End: Prevent Empty File Submissions #

First, we need to make sure the form doesn’t send an empty file input to the server when the user hasn’t selected a new image. This saves unnecessary processing and avoids junk files.

• Validate on form submit: Add a quick check to see if the file input has a selected file before letting the form submit. If not, disable the input so it doesn’t get sent to the server (keeping the existing image intact).
• Example JavaScript code:

  document.getElementById('post-edit-form').addEventListener('submit', function(e) {
    const imageInput = document.getElementById('post-image');
    // Disable empty file input so it's not included in the form data
    if (imageInput.files.length === 0) {
      imageInput.disabled = true;
    }
  });
  

• UX Improvement: If your UI has a "clear image" option, make sure it resets the file input to its empty state instead of triggering an empty file upload.

Back-End: Safeguard Image Updates #

Even if front-end validation fails, the back-end should act as the final line of defense. Never overwrite the existing image path unless a valid, non-empty image file is uploaded.

Let’s use PHP as an example (adjust for your server-side language):

• Check for valid upload: Before processing, verify an actual file was uploaded successfully:

  // Get the current image path from your database for the post
  $existingImagePath = get_existing_image_path($postId); 
  $newImagePath = $existingImagePath; // Default to keeping the existing image
  
  if ($_FILES['post-image']['error'] === UPLOAD_ERR_OK) {
    $fileSize = $_FILES['post-image']['size'];
    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    $fileType = mime_content_type($_FILES['post-image']['tmp_name']);
  
    // Only proceed if file is non-empty and a valid image type
    if ($fileSize > 0 && in_array($fileType, $allowedTypes)) {
      // Generate a unique filename to avoid conflicts
      $fileName = uniqid() . '.' . pathinfo($_FILES['post-image']['name'], PATHINFO_EXTENSION);
      $uploadPath = 'images/' . $fileName;
      
      if (move_uploaded_file($_FILES['post-image']['tmp_name'], $uploadPath)) {
        $newImagePath = $uploadPath;
        // Optional: Delete the old image file to free up space
        if (file_exists($existingImagePath)) {
          unlink($existingImagePath);
        }
      }
    }
  }
  
  // Update the database with either the new image or the existing one
  update_post_image($postId, $newImagePath);
  

• Key Takeaway: By default, we retain the existing image path. We only update it if a valid, non-empty image is successfully uploaded. This ensures no empty or invalid files replace your working images.

Bonus: Clean Up Stray Empty Files #

If you already have empty files cluttering your images/ directory, run a quick script to delete them:

$dir = 'images/';
foreach (glob($dir . '*') as $file) {
  if (is_file($file) && filesize($file) === 0) {
    unlink($file);
  }
}

Test all scenarios to confirm it works: submit with a new image, submit without selecting any image, and even try submitting a non-image file—your site should keep the original image intact in all cases except when a valid new image is uploaded.

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