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

Nakul Kumar · · 298 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:

How To Install NVM (Node Version Manager) on Ubuntu System?

This tutorial will assist you with installing NVM on the Ubuntu machine. Additionally, allow you to install different node versions and other useful examples.
Harish Kumar

What is Teleport Component in Vue.js 3?

Vue 3 provides the <teleport> component. Here in this post, I will show you how to use the <teleport> component in your Vue.js 3 project.
Razet

Multiple v-model Bindings in Vue 3

In this guide, I will explain the new v-model in Vue 3 and go through a new feature that permits you to utilize various v-model on the same component!
Razet

How to Add Google reCAPTCHA to a PHP Form with Example?

In this guide, we will integrate the Google reCAPTCHA in the PHP contact form. Utilizing this Google reCAPTCHA code, we can validate the human users and protect the form of submission (...)
Nakul Kumar

What is the difference Between watch and watchEffect in Vue.js 3?

There are a few cases where we may need to track a reactive property, and we can do this by utilizing a Vue watcher.
Harish Kumar

What's new in PHP 8: New Features and Improvements

PHP 8.0 is a major update of the PHP language. It contains a range of new features and optimizations such as the JIT compiler, union types, attributes, constructor property promotion, (...)
Harish Kumar