Ajax Upload image

To upload an image using Ajax, you can use the following steps:

Create an HTML form that allows the user to select an image file to upload
Add a JavaScript file that handles the file upload using an XMLHttpRequest object
On the server side, use the PHP move_uploaded_file function to save the uploaded image to a desired location

Here is some sample code to get you started:

HTML Form:

Example of an Html form

<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
  <input type="file" name="image" />
  <input type="submit" value="Upload Image" />
</form>

Note: action and method are included for accessibility and fallback, though JavaScript intercepts the submission.

JavaScript file:

Example of a JavaScript file which triggers a form

// Get the form element
var form = document.getElementById('uploadForm');

// Add a submit event listener to the form
form.addEventListener('submit', function(e) {
  // Prevent the default form submission behavior
  e.preventDefault();

  // Get the selected file
  var file = form.querySelector('[name="image"]').files[0];

  // Create a new FormData object
  var formData = new FormData();

  // Add the file to the FormData object
  formData.append('image', file);

  // Create an XMLHttpRequest object
  var xhr = new XMLHttpRequest();

  // Set the request URL
  xhr.open('POST', '/upload.php');

  // Set the request as asynchronous
  xhr.responseType = 'json';
  
  // Set the request onload event listener
  xhr.onload = function() {
    if (xhr.status === 200) {
      // The image was successfully uploaded
      console.log(xhr.response);
    } else {
      // There was an error uploading the image
      console.error(xhr.response);
    }
  }

  // Send the request
  xhr.send(formData);
});

upload.php:

Example of an ajax file upload using PHP

<?php

// Check if the image was uploaded
if (isset($_FILES['image'])) {
  $file = $_FILES['image'];
  $allowed_ext = ['jpg', 'jpeg', 'png', 'gif'];
  $max_size = 5 * 1024 * 1024; // 5MB

  // Validate file extension
  $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
  if (!in_array($ext, $allowed_ext)) {
    echo json_encode(['status' => 'error', 'message' => 'Invalid file type']);
    exit;
  }

  // Validate file size
  if ($file['size'] > $max_size) {
    echo json_encode(['status' => 'error', 'message' => 'File exceeds maximum size']);
    exit;
  }

  // Check if file is a valid image (avoids EXIF extension dependency)
  $image_info = getimagesize($file['tmp_name']);
  if ($image_info === false) {
    echo json_encode(['status' => 'error', 'message' => 'Uploaded file is not a valid image']);
    exit;
  }

  // Secure destination path to prevent path traversal
  $destination = '/path/to/saved/' . basename($file['name']);
  if (move_uploaded_file($file['tmp_name'], $destination)) {
    echo json_encode(['status' => 'success']);
  } else {
    echo json_encode(['status' => 'error', 'message' => 'Failed to save the image']);
  }
} else {
  echo json_encode(['status' => 'error', 'message' => 'No image was uploaded']);
}

?>