PHP多图上传代码异常：提交表单后仅显示单张图片

Hey there! Let's troubleshoot why your multi-image upload form is only displaying one image after submission. This is a super common pitfall, and we can work through the most likely issues step by step.

1. Check Your Form's File Input Configuration #

First, make sure your file input field is set up to accept multiple files and sends them as an array to the backend:

• Add the multiple attribute to let users select multiple files at once.
• Append [] to the name attribute so the server recognizes it as an array of files (instead of a single file).

Here's the corrected input tag:

<input type="file" name="images[]" id="image-upload" multiple accept="image/*">

2. Update Backend Logic to Handle Multiple Files #

If your backend was written for single-file uploads, it's probably only grabbing the first file in the request. You need to loop through the array of uploaded files instead of accessing a single entry.

Example (PHP): #

Instead of handling a single $_FILES['image'], iterate over $_FILES['images']:

// Initialize an array to store paths of successfully uploaded images
$uploadedImages = [];
$uploadDir = 'uploads/';

// Create upload directory if it doesn't exist
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

if (isset($_FILES['images']) && $_FILES['images']['error'][0] !== UPLOAD_ERR_NO_FILE) {
    $fileCount = count($_FILES['images']['name']);
    
    // Loop through each uploaded file
    for ($i = 0; $i < $fileCount; $i++) {
        if ($_FILES['images']['error'][$i] === UPLOAD_ERR_OK) {
            $tempName = $_FILES['images']['tmp_name'][$i];
            $fileName = uniqid() . '-' . basename($_FILES['images']['name'][$i]); // Add unique ID to avoid overwrites
            $targetPath = $uploadDir . $fileName;
            
            // Move the temp file to the upload directory
            if (move_uploaded_file($tempName, $targetPath)) {
                $uploadedImages[] = $targetPath;
            }
        }
    }
}

3. Ensure Frontend Displays All Uploaded Images #

Even if all files are uploaded successfully, your frontend might only be rendering the first image. Make sure you loop through the array of uploaded image paths to display each one.

Example (PHP + HTML): #

<?php if (!empty($uploadedImages)): ?>
    <div class="uploaded-images">
        <h3>Successfully Uploaded Images:</h3>
        <?php foreach ($uploadedImages as $imagePath): ?>
            <img src="<?php echo $imagePath; ?>" alt="Uploaded image" style="max-width: 200px; margin: 10px; border: 1px solid #ddd; padding: 5px;">
        <?php endforeach; ?>
    </div>
<?php endif; ?>

4. Verify Server Upload Limits #

Sometimes, larger files might get rejected silently, making it look like only one image uploaded. Check your server's configuration:

• For PHP, edit php.ini and ensure these values are set high enough (adjust based on your needs):

  upload_max_filesize = 20M
  post_max_size = 25M
  max_file_uploads = 10 // This controls the maximum number of files allowed in one upload
  

• Don't forget to restart your web server after making changes.

Quick Recap #

1. Fix the form input to use name="images[]" and multiple.
2. Update backend code to loop through the file array.
3. Modify frontend to render every image in the uploaded paths array.
4. Check server limits to ensure no files are being rejected.

Give these steps a try, and you should see all your uploaded images showing up correctly!

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