PHP社交网络头像上传问题：如何提示用户图片过大？

Hey there! Let's get your avatar upload working properly with clear feedback for users when their image is too big. First, let's break down the gaps in your current code, then walk through the fixes step by step.

Key Issues in Your Current Setup #

• No file size validation: Your upload.php doesn't check if the uploaded file exceeds a reasonable limit, which is almost certainly causing those silent failures.
• Upload logic out of order: You're moving the file to your target directory before validating it (like checking if it's an actual image), meaning invalid files still end up cluttering your server.
• SQL injection risk: You're directly inserting user input into your SQL query—this is a critical security vulnerability.
• Lack of clear user feedback: Success/error messages are either missing or don't clearly communicate what went wrong to the user.

Step 1: Add Server-Side Validation & Feedback (upload.php) #

Let's rewrite upload.php to include size checks, proper validation order, secure SQL, and clear error handling. We'll set a 2MB limit as an example—adjust this value to fit your needs.

<?php
// Assume $conn is your existing database connection
$target_dir = "images/uploads/";
$uploadOk = 1;
$errorMsg = "";

// Define maximum file size (2MB converted to bytes)
$maxFileSize = 2 * 1024 * 1024;

if(isset($_POST["change"])) {
    // Grab file details
    $fileName = basename($_FILES["fileToUpload"]["name"]);
    $target_file = $target_dir . $fileName;
    $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
    $fileSize = $_FILES["fileToUpload"]["size"];

    // 1. Validate file is an actual image
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check === false) {
        $errorMsg = "File is not a valid image.";
        $uploadOk = 0;
    }

    // 2. Check if file exceeds size limit
    if($fileSize > $maxFileSize) {
        $errorMsg = "Sorry, your file is too large. Maximum allowed size is 2MB.";
        $uploadOk = 0;
    }

    // 3. Restrict to allowed image formats
    if(!in_array($imageFileType, ["jpg", "jpeg", "png", "gif"])) {
        $errorMsg = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
        $uploadOk = 0;
    }

    // If all checks pass, proceed with upload
    if($uploadOk == 1) {
        if(move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
            // Use prepared statement to prevent SQL injection
            $sql = "UPDATE users SET userPic = ? WHERE username = ?";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param("ss", $fileName, $username);
            
            if($stmt->execute()) {
                // Redirect back to profile with success status
                header("Location: profile.php?status=success");
                exit();
            } else {
                $errorMsg = "Sorry, we couldn't update your profile.";
            }
            $stmt->close();
        } else {
            $errorMsg = "Sorry, there was an error uploading your file.";
        }
    }

    // Redirect back to profile with error message
    header("Location: profile.php?error=" . urlencode($errorMsg));
    exit();
} else {
    header("Location: profile.php?error=Invalid request");
    exit();
}
?>

Step 2: Add Feedback Display to profile.php #

Update your profile.php to show success/error messages when the user returns from the upload. We'll add a message area and optional client-side validation for instant feedback.

<!-- Add this at the top of profile.php to display status messages -->
<div id="message-area">
    <?php
    // Show success message
    if(isset($_GET["status"]) && $_GET["status"] == "success") {
        echo "<p style='color: #2ecc71;'>Profile picture updated successfully!</p>";
    }
    // Show error message
    if(isset($_GET["error"])) {
        echo "<p style='color: #e74c3c;'>" . htmlspecialchars($_GET["error"]) . "</p>";
    }
    ?>
</div>

<form id="form2" action="upload.php" method="post" enctype="multipart/form-data">
    <p id="p1">Change profile picture:</p>
    <br />
    <input type="file" name="fileToUpload" id="fileToUpload"><br />
    <br><input id="sub1" type="submit" value="Change profile picture" name="change"><br />
</form>

<!-- Trigger the Modal -->
<img id="myImg" src="default.png" width="200" height="150">
<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- The Close Button -->
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
    <!-- Modal Content (The Image) -->
    <img class="modal-content" id="img01">
    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
</div>

<script>
// Existing modal functionality remains unchanged
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}

// Optional: Add client-side size check for instant feedback
document.getElementById('fileToUpload').addEventListener('change', function(e) {
    const maxSize = 2 * 1024 * 1024; // 2MB
    const file = e.target.files[0];
    if(file.size > maxSize) {
        alert("Sorry, your file is too large. Maximum allowed size is 2MB.");
        this.value = ""; // Clear the selected file
    }
});
</script>

What We Fixed #

• Server-side size validation: Added a clear check for file size and returned a user-friendly error message when limits are exceeded.
• Proper validation flow: Now we validate files before moving them to the server, so invalid files don't take up unnecessary space.
• Secure SQL: Used prepared statements to eliminate SQL injection risks.
• Clear user feedback: Added a message area to display success/error messages, plus optional client-side validation to give users instant feedback without waiting for the server.
• Clean redirects: Instead of echoing messages directly in upload.php, we redirect back to the profile page with status parameters, keeping the user on the page they expect to be on.

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