如何通过JavaScript AJAX将图片与文本输入提交至PHP并存入数据库

Hey there! Let's get this photo upload system working properly. I'll break it down into three key parts: tweaking your HTML, writing the JavaScript to handle submission, and building the PHP backend to save everything.

1. Adjust Your HTML Form #

First, your form needs a few tweaks to support file uploads and make it easier to target with JS:

• Add enctype="multipart/form-data" (required for file uploads)
• Give the form an ID for easy JS selection
• Ensure all input fields have a name attribute (so PHP can pick up the data)
• Add a file input field if you haven't already

Here's an updated version of your form:

<form id="photoUploadForm" method="post" autocomplete="off" enctype="multipart/form-data">
  <div id="upload-header">
    <h2>Upload Photo</h2>
    <!-- Your close icon SVG here -->
  </div>
  <div class="form-group">
    <label for="photoTitle">Photo Title</label>
    <input type="text" id="photoTitle" name="photoTitle" required>
  </div>
  <div class="form-group">
    <label for="photoDesc">Photo Description</label>
    <textarea id="photoDesc" name="photoDesc" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label for="photoFile">Select Image</label>
    <input type="file" id="photoFile" name="photoFile" accept="image/*" required>
  </div>
  <button type="submit">Upload Photo</button>
</form>

2. JavaScript to Handle AJAX Submission #

We'll use the modern fetch() API to send the form data (including the image) to your PHP script without reloading the page. Add this script before your closing </body> tag:

document.getElementById('photoUploadForm').addEventListener('submit', async (e) => {
  // Prevent the default form submission
  e.preventDefault();
  
  // Get the form element and create a FormData object
  const form = e.target;
  const formData = new FormData(form);
  
  try {
    // Send the data to PHP
    const response = await fetch('upload-handler.php', {
      method: 'POST',
      body: formData
    });
    
    // Parse the JSON response from PHP
    const result = await response.json();
    
    if (result.success) {
      alert('Photo uploaded successfully!');
      // Reset the form if needed
      form.reset();
    } else {
      alert(`Error: ${result.message}`);
    }
  } catch (error) {
    alert('Something went wrong with the upload. Please try again.');
    console.error(error);
  }
});

Key Notes for JS: #

• FormData automatically captures all form fields, including files—no need to manually append each field.
• We use async/await for cleaner asynchronous code instead of callback hell.
• Always handle errors to give users meaningful feedback.

3. PHP Backend to Save Data & Image #

Create a new file called upload-handler.php (match the path you used in the JS fetch call). This script will:

• Validate the uploaded file
• Save the image to a server directory
• Store the photo details in your database

<?php
// Only allow POST requests
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(['success' => false, 'message' => 'Invalid request method']);
  exit;
}

// Configuration
$uploadDir = 'uploads/'; // Create this folder and set permissions to 755
$allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

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

// Handle file upload
$fileError = $_FILES['photoFile']['error'];
if ($fileError !== UPLOAD_ERR_OK) {
  $errorMessages = [
    UPLOAD_ERR_INI_SIZE => 'File exceeds upload_max_filesize limit',
    UPLOAD_ERR_FORM_SIZE => 'File exceeds MAX_FILE_SIZE limit',
    UPLOAD_ERR_PARTIAL => 'File was only partially uploaded',
    UPLOAD_ERR_NO_FILE => 'No file was uploaded',
    UPLOAD_ERR_NO_TMP_DIR => 'Temporary folder not found',
    UPLOAD_ERR_CANT_WRITE => 'Failed to write file to disk',
    UPLOAD_ERR_EXTENSION => 'File upload stopped by extension'
  ];
  echo json_encode(['success' => false, 'message' => $errorMessages[$fileError] ?? 'Unknown upload error']);
  exit;
}

// Validate file type
$fileType = mime_content_type($_FILES['photoFile']['tmp_name']);
if (!in_array($fileType, $allowedTypes)) {
  echo json_encode(['success' => false, 'message' => 'Only JPG, PNG, and GIF files are allowed']);
  exit;
}

// Generate a unique filename to avoid overwriting
$fileExt = pathinfo($_FILES['photoFile']['name'], PATHINFO_EXTENSION);
$fileName = uniqid('photo_', true) . '.' . $fileExt;
$filePath = $uploadDir . $fileName;

// Move the uploaded file to the target directory
if (!move_uploaded_file($_FILES['photoFile']['tmp_name'], $filePath)) {
  echo json_encode(['success' => false, 'message' => 'Failed to save the image']);
  exit;
}

// Now save the photo details to your database
// Using PDO for secure, prepared statements (prevents SQL injection)
try {
  // Replace with your database credentials
  $pdo = new PDO('mysql:host=localhost;dbname=your_database_name;charset=utf8mb4', 'your_username', 'your_password');
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
  // Prepare the insert statement
  $stmt = $pdo->prepare("INSERT INTO photos (title, description, image_path) VALUES (:title, :description, :image_path)");
  
  // Bind parameters
  $stmt->bindParam(':title', $_POST['photoTitle']);
  $stmt->bindParam(':description', $_POST['photoDesc']);
  $stmt->bindParam(':image_path', $filePath);
  
  // Execute the statement
  $stmt->execute();
  
  // Send success response
  echo json_encode(['success' => true, 'message' => 'Photo uploaded and saved successfully']);
} catch (PDOException $e) {
  // If database fails, delete the uploaded image to clean up
  unlink($filePath);
  echo json_encode(['success' => false, 'message' => 'Database error: ' . $e->getMessage()]);
}
?>

Important PHP Notes: #

• Permissions: Make sure the uploads/ folder has write permissions (chmod 755 or 777, but 755 is more secure).
• File Validation: Never trust the client-side accept attribute—always validate file types on the server with mime_content_type().
• SQL Safety: Use prepared statements (PDO or MySQLi) to prevent SQL injection. Never directly insert user input into SQL queries.
• Cleanup: If the database insertion fails, delete the uploaded image to avoid orphaned files.

Final Checks #

• Make sure your PHP configuration allows large enough file uploads (check upload_max_filesize and post_max_size in php.ini).
• Test the flow: fill out the form, upload an image, and verify it appears in the uploads/ folder and your database.

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