How to Upload Multiple Images with jQuery AJAX and PHP, with preview

Nakul Kumar · · 5983 Views

Uploading an image without page refresh is more user-friendly than refreshing the entire page. So, in this guide, you will learn how to upload multiple images using ajax in jQuery and PHP. You will also learn how to show the preview of multiple images before uploading them to the server.

Step 1: Create Image Upload Form

Use the following snippet to create an image uploading form.

<form method='post' action='' enctype="multipart/form-data">
   <input type="file" id='files' name="files[]" multiple><br>
   <input type="button" id="submit" value='Upload'>
</form>

<!-- Preview -->
<div id='preview'></div>

In this snippet, to enable multiple file selection, we have added the multiple attribute and name as an Array type (name='files[]').

And we have also added the <div id='preview'>, here we will display image preview using jQuery before uploading to the server.

Step 2: Script for Ajax request

Next, use the below script that going to make an ajax request to the server to upload images.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#submit').click(function(){
       var form_data = new FormData();

       // Read selected files
       var totalfiles = document.getElementById('files').files.length;
       for (var index = 0; index < totalfiles; index++) {
          	form_data.append("files[]", document.getElementById('files').files[index]);
     		$('#preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
       }

       // AJAX request
       $.ajax({
         url: 'ajaxUpload.php', 
         type: 'post',
         data: form_data,
         dataType: 'json',
         contentType: false,
         processData: false,
         success: function (response) {
            alert("Uploaded SuccessFully");
            console.log(response);

         }
       });
    });
});
</script>

In this script, on clicking the upload button, it creates FormData() object, and reads the selected files, and then displays preview images. After that, it makes an ajax request, and we sent the selected images with that ajax.

Step 3: Uploading image in PHP

Create a new file name ajaxUpload.php record and paste the following. In this code, it is going to store the images in the /uploads directory.

<?php
// Count total files
$countfiles = count($_FILES['files']['name']);

// Upload directory
$upload_location = "uploads/";

// To store uploaded files path
$files_arr = array();

// Loop all files
for($index = 0;$index < $countfiles;$index++){

   if(isset($_FILES['files']['name'][$index]) && $_FILES['files']['name'][$index] != ''){
      // File name
      $filename = $_FILES['files']['name'][$index];

      // Get extension
      $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

      // Valid image extension
      $valid_ext = array("png","jpeg","jpg");

      // Check extension
      if(in_array($ext, $valid_ext)){

         // File path
         $path = $upload_location.$filename;

         // Upload file
         if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
            $files_arr[] = $path;
         }
      }
   }
}

echo json_encode($files_arr);
die;
0

Please login or create new account to add your comment.

0 comments
You may also like:

Mastering the `array.map` Method in JavaScript

The array.map method in JavaScript is a powerful and versatile function used to create a new array by applying a specified function to each element of the original array. It’s (...)
Harish Kumar

Compress and Download Files in Laravel Using ZipArchive with Examples

In web development, file compression is essential for optimizing data transfer and storage. Laravel provides tools for creating and downloading compressed files. This guide explores (...)
Harish Kumar

JavaScript Async/Await: Writing Clean and Efficient Asynchronous Code

JavaScript is a single-threaded programming language. Thus, it means that it can execute one command at a time. How can this be possible? Well, the answer lies in the fact that (...)
Harish Kumar

React Components Explained: Function vs Class Components

React, a popular JavaScript library for building user interfaces, revolves around components. Components are the building blocks of a React application, encapsulating logic and (...)
Harish Kumar

Understanding JavaScript Promises: Advanced Techniques and Best Practices

JavaScript Promises are a powerful tool for managing asynchronous operations in JavaScript, offering a more readable and maintainable approach than traditional callback methods. (...)
Harish Kumar

JSX in React: A Comprehensive Guide

JavaScript XML (JSX) is a syntax extension for JavaScript, commonly used with React to describe what the user interface should look like. Introduced by Facebook, JSX makes it easier (...)
Harish Kumar